每次更改完代码后需要执行webpack重新打包，不利于开发环境调试代码，因此需要配置，显示文件修改后自动打包运行。

一、devServer

  1. 安装dev-server包

npm i webpack-dev-server -D

  1. 修改webpack.config.js文件，新增devServer ```javascript const {resolve} = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’) module.exports = { // 入口 entry:’./src/index.js’, // 输出 output:{
    1.  // 输出文件名
    2.  filename:'built.js',
    3.  //输出路径
    4.  path:resolve(__dirname,'build')
    }, // loader的配置 module:{
    1.  rules:[
    2.      {
    3.          //匹配哪些文件
    4.          test:/\.css/,
    5.          //使用哪些loader进行处理
    6.          use:[
    7.              'style-loader',
    8.              'css-loader',
    9.              'less-loader'
    10.          ]
    11.      },
    12.      {
    13.          // 处理html中的img
    14.          test: /\.html$/,
    15.          loader:'html-loader'
    16.      }
    17.  ]
  1. },
  2. plugins:[
  3.     new HtmlWebpackPlugin({
  4.         // 复制一个html文件，并引入
  5.         template:'./src/index.html'
  6.     })
  7. ],
  9. // 自动打包运行
  10. // 指令：npx webpack-dev-server
  11. devServer: {
  12.     contentBase: resolve(__dirname,'build'),
  13.     compress:true,
  14.     port:3000,
  15.     open:true
  16. },
  17. // 模式
  18. mode:'development'

}

  1. <a name="6.devServer"></a>
  2. ## 二、提取css成单独文件
  3. > 用到mini-css-extract-plugin插件，将style-loader 改为 MiniCssExtractPlugin.loader,
  5. - webpack.config.js文件（配置文件）
  6. ```javascript
  7. const {resolve} = require('path');
  8. const HtmlWebpackPlugin = require('html-webpack-plugin')
  9. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  10. module.exports = {
  11.     // 入口
  12.     entry:'./src/index.js',
  13.     // 输出
  14.     output:{
  15.         // 输出文件名
  16.         filename:'built.js',
  17.         //输出路径
  18.         path:resolve(__dirname,'build')
  19.     },
  20.     // loader的配置
  21.     module:{
  22.         rules:[
  23.             {
  24.                 //匹配哪些文件
  25.                 test:/\.css/,
  26.                 //使用哪些loader进行处理
  27.                 use:[
  28.                     MiniCssExtractPlugin.loader,
  29.                     'css-loader',
  30.                 ]
  31.             },
  32.             {
  33.                 // 处理html中的img
  34.                 test: /\.html$/,
  35.                 loader:'html-loader'
  36.             }
  37.         ]
  40.     },
  41.     plugins:[
  42.         new HtmlWebpackPlugin({
  43.             // 复制一个html文件，并引入
  44.             template:'./src/index.html'
  45.         }),
  46.         new MiniCssExtractPlugin()
  47.     ],
  49.     // 自动打包运行
  50.     // 指令：npx webpack-dev-server
  51.     devServer: {
  52.         contentBase: resolve(__dirname,'build'),
  53.         compress:true,
  54.         port:3000,
  55.         open:true
  56.     },
  57.     // 模式
  58.     mode:'development'
  59. }

三、css兼容

package.json增加以下内容

  1. "browserslist":{
  2.   "development": [
  3.     "last 1 chrome version",
  4.     "last 1 firefox version",
  5.     "last 1 safari version",
  6.   ],
  7.   "production": [
  8.     ">0.1%",
  9.     "not dead",
  10.     "not op_mini all" 
  11.   ]
  12. }
  • webpack.config.js文件（配置文件） ```javascript const {resolve} = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’) const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

// 设置nodejs环境变量 // process.env.NODE_ENV = “development” module.exports = { // 入口 entry:’./src/index.js’, // 输出 output:{ // 输出文件名 filename:’built.js’, //输出路径 path:resolve(__dirname,’build’) }, // loader的配置 module:{ rules:[ { //匹配哪些文件 test:/.css/, //使用哪些loader进行处理 use:[ MiniCssExtractPlugin.loader, ‘css-loader’, { loader: “postcss-loader”, options:{ ident:’postcss’, plugins:()=>{ require(‘postcss-preset-env’)() } } } ] }, { // 处理html中的img test: /.html$/, loader:’html-loader’ } ]

  1. },
  2. plugins:[
  3.     new HtmlWebpackPlugin({
  4.         // 复制一个html文件，并引入
  5.         template:'./src/index.html'
  6.     }),
  7.     new MiniCssExtractPlugin()
  8. ],
  10. // 自动打包运行
  11. // 指令：npx webpack-dev-server
  12. devServer: {
  13.     contentBase: resolve(__dirname,'build'),
  14.     compress:true,
  15.     port:3000,
  16.     open:true
  17. },
  18. // 模式
  19. mode:'development'

}

  1. <a name="ZLW3v"></a>
  2. ## 四、css压缩
  4. - webpack.config.js文件（配置文件）
  5. ```javascript
  6. const {resolve} = require('path');
  7. const HtmlWebpackPlugin = require('html-webpack-plugin')
  8. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  9. const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
  10. // 设置nodejs环境变量
  11. // process.env.NODE_ENV = "development"
  12. module.exports = {
  13.     // 入口
  14.     entry:'./src/index.js',
  15.     // 输出
  16.     output:{
  17.         // 输出文件名
  18.         filename:'built.js',
  19.         //输出路径
  20.         path:resolve(__dirname,'build')
  21.     },
  22.     // loader的配置
  23.     module:{
  24.         rules:[
  25.             {
  26.                 //匹配哪些文件
  27.                 test:/\.css/,
  28.                 //使用哪些loader进行处理
  29.                 use:[
  30.                     MiniCssExtractPlugin.loader,
  31.                     'css-loader',
  32.                     {
  33.                         loader: "postcss-loader",
  34.                         options:{
  35.                             ident:'postcss',
  36.                             plugins:()=>{
  37.                                 require('postcss-preset-env')()
  38.                             }
  39.                         }
  40.                     }
  41.                 ]
  42.             },
  43.             {
  44.                 // 处理html中的img
  45.                 test: /\.html$/,
  46.                 loader:'html-loader'
  47.             }
  48.         ]
  51.     },
  52.     plugins:[
  53.         new HtmlWebpackPlugin({
  54.             // 复制一个html文件，并引入
  55.             template:'./src/index.html'
  56.         }),
  57.         new MiniCssExtractPlugin(),
  58.         new OptimizeCssAssetsWebpackPlugin()
  59.     ],
  61.     // 自动打包运行
  62.     // 指令：npx webpack-dev-server
  63.     devServer: {
  64.         contentBase: resolve(__dirname,'build'),
  65.         compress:true,
  66.         port:3000,
  67.         open:true
  68.     },
  69.     // 模式
  70.     mode:'development'
  71. }

五、eslint 语法检查

  • 安装依赖

npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import

  • webpack.config.js文件（配置文件） ```javascript const {resolve} = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’) const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’) const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin’) // 设置nodejs环境变量 // process.env.NODE_ENV = “development” module.exports = { // 入口 entry:’./src/index.js’, // 输出 output:{
    1.   // 输出文件名
    2.   filename:'built.js',
    3.   //输出路径
    4.   path:resolve(__dirname,'build')
    }, // loader的配置 module:{
    1.   rules:[
    2.       {
    3.           //匹配哪些文件
    4.           test:/\.css/,
    5.           //使用哪些loader进行处理
    6.           use:[
    7.               MiniCssExtractPlugin.loader,
    8.               'css-loader',
    9.               {
    10.                   loader: "postcss-loader",
    11.                   options:{
    12.                       ident:'postcss',
    13.                       plugins:()=>{
    14.                           require('postcss-preset-env')()
    15.                       }
    16.                   }
    17.               }
    18.           ]
    19.       },
    20.       {
    21.           // 处理html中的img
    22.           test: /\.html$/,
    23.           loader:'html-loader'
    24.       },
    25.       // {
    26.       //     test:/\.js$/,
    27.       //     exclude:/node_modules/,
    28.       //     loader:'eslint-loader',
    29.       //     options:{
    30.       //         fix:true
    31.       //     }
    32.       // }
    33.   ]
  1. },
  2. plugins:[
  3.     new HtmlWebpackPlugin({
  4.         // 复制一个html文件，并引入
  5.         template:'./src/index.html'
  6.     }),
  7.     new MiniCssExtractPlugin(),
  8.     new OptimizeCssAssetsWebpackPlugin()
  9. ],
  11. // 自动打包运行
  12. // 指令：npx webpack-dev-server
  13. devServer: {
  14.     contentBase: resolve(__dirname,'build'),
  15.     compress:true,
  16.     port:3000,
  17.     open:true
  18. },
  19. // 模式
  20. mode:'development'

} ```