1、入口entry起点
entry: './src/index.js' //换成项目的入口文件
2、输出output
var {resolve} = require('path');
module.exports = { output:{ filename: 'bundle.js', //输出的文件名
//_dirname nodejs的变量，表示当前文件的目录绝对路径
path: resolve(_dirname, 'build') //输出的路径
}}
3. 样式资源处理:
（1）编译
less-loader:将less文件转化为css语法；
css-loader:将css文件转化为js语法，插入js文件中；
style-loader: 在head中创建style标签，将上面js例的css放入style标签里。
webpack.config.js
module.exports = { entry: path.resolve(__dirname, './src/js/index.js'), output: { filename: "bundle.js", path: path.resolve(__dirname, "build") }, module: { rules: [ { //匹配哪些文件 test: /\.less$/, //排除哪些文件，代表忽略 node_modules中的less文件 exclude: /node_modules/, //使用哪些loader进行处理，use数组执行顺序：从右到左，从下到上 use: [ //创建style标签，将js中的css资源插入head标签中 'style-loader', //将css文件变成commonjs模块加载到js中，内容变为样式字符串 'css-loader', //将less文件编译成css文件 'less-loader' ] }, { //匹配哪些文件 test: /\.css$/, //排除哪些文件，代表忽略 node_modules中的less文件 exclude: /node_modules/, //使用哪些loader进行处理，use数组执行顺序：从右到左，从下到上 use: [ //创建style标签，将js中的css资源插入head标签中 'style-loader', //将css文件变成commonjs模块加载到js中，内容变为样式字符串 'css-loader' ] } ] }, postcss: [ require('autoprefixer') //调用autoprefixer插件，例如 display: flex ], mode: 'development'}
（2）提取
也可以使用**mini-css-extract-plugin**提取css到单独的css文件中。
var path = require('path')var webpack = require('webpack')var MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { entry: path.resolve(__dirname, './src/js/index.js'), output: { filename: "bundle.js", path: path.resolve(__dirname, "build") }, module: { rules: [ { // 匹配哪些文件 test: /\.css$/, //排除哪些文件，代表忽略 node_modules中的less文件 exclude: /node_modules/, //使用哪些loader进行处理，use数组执行顺序：从右到左，从下到上 use: [ //'style-loader':创建style标签，将js中的css资源插入head标签中 //这个loader取代style-loader，作用：提取js中的css成单独文件 MiniCssExtractPlugin.loader, //将css文件变成commonjs模块加载到js中，内容变为样式字符串 'css-loader' ] }] }, plugins: [ new MiniCssExtractPlugin({ filename: 'build.css' //对整合后的css文件进行重命名 }) ]}
（3）css兼容性处理：postcss--->postcss-loader postcss-preset-env
1. webpack.config.js
module: { rules: [ { test: /\.css$/, exclude: /node_modules/, use: [ MiniCssExtractPlugin.loader, 'css-loader', { //css兼容性处理 postcss --->postcss-loader postcss-preset-env //帮助postcss找到package.json文件中的browserlist里的配置,
//通过配置加载指定的css兼容样式 loader: 'postcss-loader', options: { ident: 'postcss', plugins: ()=>{ require('postcss-preset-env')() } } } ] }] },
2. 在package.json中添加：browserslist
"browserslist": {
"development": [ //开发环境 可以设置node环境变量进行修改：process.env.NODE_ENV = "development" "last 1 chrome version", //兼容最近的一个chrome版本 "last 1 firefix version", "last 1 safari version" ],
//生产环境，默认是生产环境，可以设置node环境变量进行修改：process.env.NODE_ENV = "production"
"production": [ ">0.2%", //兼容98%的浏览器 "no dead", //不管已经死掉的浏览器 "no open_mini all" //不管open_mini类型的浏览器 ] }
4. js语法检查：eslint， ``eslint-loader
webpack.config.js
module: { rules: [ { /** * 语法检查：只检查自定义源代码，不检查node_modules第三方代码 * 设置检查规则： * package.json中设置eslintConfig
* "eslintConfig":{ * "extends": "airbnb-base" * } * 下面使用airbnb规则， 下载eslint-config-airbnb-base * * */ test: /\.js$/, exclude: /node_modules/, use: 'eslint-loader', options:{ fix:true //自动修复eslint错误 } } ] },
5.js兼容性处理：babel-loader
(1) 基本js兼容性处理： @babel/preset-env
module: { rules: [ { /** * js兼容性处理 * 1\. 基本js兼容性处理： @babel/preset-env */ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader', options:{ //预设：只是Babel做什么样的兼容性处理 preset: ['@babel/preset-env'] } }] },
（2） 全部js兼容性处理：@babel/polyfill
在js文件中使用import '@babel/polyfill'引入所有兼容性代码，会增加代码体积，不推荐
（3）按需对js做兼容性处理：core-js
module: { rules: [ { /** * js兼容性处理 * 1\. 基本js兼容性处理： @babel/preset-env， 只能转化基本语法，对于es6语法不能转换 * 2\. 全部js兼容性处理： @babel/polyfill ,在js文件中使用import '@babel/polyfill'引入 * 但是会将所有兼容性代码全部引入，会导致打包后代码体积过大 * 3\. 按需对js做兼容性处理：core-js */ test: /\.(js|jsx)$/, exclude: /node_modules/, use: 'babel-loader', options:{ //预设：只是Babel做什么样的兼容性处理 preset: [ '@babel/preset-env', { useBuiltIns: 'usage', //按需加载 corejs: { //指定corejs版本 version: 3 }, //指定兼容性做到浏览器的哪个版本 target: { chrome: '60', firefox: '50' //... } } ] } }] },
6. 压缩js
mode:'production'
// 生产环境下会自动压缩js代码
7、html资源处理：html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
modules.export = {
plugins: [ // html 模板插件 ,将打包后的bundle，css文件自动引入到新的html文件（以模板路径文件创建的html文件）中 new HtmlWebpackPlugin({ template: __dirname + './src/index.html', minify:{ //压缩html文件 collapseWhitespace: true, //移除空格 removeComments: true //移除注释 } }) ],
}
8. 图片资源处理：url-loader
url-loader会默认使用es6模块化解析，而html-loader引入图片是common.js，所以同时使用会报错，所以将url-loader的option中的esModul:``false
module: { rules: [ { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader', options: { /** * 当发现图片大小小于8kb，就会被base64处理，也就是把图片转化为base64字符串 * 优点： 减少请求数量 * 缺点：图片体积会增加 * */ limit: 8*1024,
esModule: false, //关闭url-loader的es6模块化解析，使用commonjs解析
name: '[hash:10].[ext]' //给图片进行重命名，取图片hash值的前十位，ext代表图片文件原来的扩展名 } } ] },
可以处理background：url('img.jpg'), 但是无法处理html中的img图片资源，
使用**html-loader**处理：
module:{
rules: [
{ test:/\.html$/, //处理html文件中的img图片（负责引入img,从而能被url-loader进行处理） loader: 'html-loader' }
]
}
9、打包其他资源：file-loader
module:{
rules: [
{ exclude: /\.(css|js|html|less)$/, loader: 'file-loader', option: { name: '[hash:10].[ext]' } }
]
}
