# webpack 配置文件 ## 1. webpack.config.js ``` const { resolve } = require('path') // 构建工具webpack基于node运行的，默认采用的commonjs语法 module.exports = { entry: './src/index.js', output: { filename: 'build.js', path: resolve(__dirname, 'build') // 通常是绝对路径 __dirname是nodejs的一个变量，代表当前文件的目录的绝对路径 }, module: { // loader 详细配置 rules: [{ test: '/\.css$/'， use: [ 'style-loader', 'css-loader' ] }] }, plugins: [], mode: 'developement' } ``` 1. 打包css文件 ``` module: { // loader 详细配置 rules: [{ test: '/\.css$/'， use: [ 'style-loader', // 'css-loader?minimize' { loader: 'css-loader', options: { minimize:true, } } ] }] } 1. use 数组中的执行顺序是从右到左依次执行 2. css-loader：将css文件变成commonjs模块，加载到js文件中，里面的内容是样式字符串 3. style-loader: 创建style标签，将js文件中的样式资源插入，然后添加到head标签中生效 4. 每个loader都可以通过query 或者 object 的形式传入参数，例如 css-loader?minimize， 告诉cssloader要开启压缩。 ``` 2. 打包 html html-webpack-plugin 会用 script 标签引入所有 webpack 生成的bundle ``` const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ // 默认创建一个html文件，自动引入打包输出的所有资源 new HtmlWebpackPlugin({ // 以./src/index.html 作为模版，复制这个html文件，并自动引入打包输出的所有资源 template: './src/index.html' }) ] ``` 3. 打包图片资源 ``` { test: /\.(jpeg|png|gif)$/, // 使用一个loader loader: 'url-loader', options: { // 图片大小小于 8kb， 就会用base64处理 limit: 200 * 1024, esModule: false, // url-loader 默认使用es6模块话解析，而html-loader引入图片是commonjs，解析时会出现问题： 【object Module】 // 解决： 关闭url-loader 的 es6模块化 name: '[hash:10].[ext]' // ext 取文件原来的扩展名，hash 取元素hash的前10位 } }, { test: /\.html$/, loader: 'html-loader' } ``` ``` 1. url-loader是处理样式中的图片的，处理不了html中的图片 2. base64图片的优点：能够减少一个图片的 HTTP 请求。 缺点：图片体积会更大（文件请求速度慢） 3. html-loader是用来处理html文件的img图片的， 负责引入这个图片，从而能被url-loader进行处理 4. html-loader 打包后的图片不显示，通过使用 html-withimg-loader 解决。 ```