webpack基础配置总结

一、五个核心概念（入口Entry、输出Output、Loader、插件Plugins、模式(Mode）

• 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
• 输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
• Loader 让 webpack 能够去处理那些非 JavaScript 文件（css文件、图片资源文件、less文件），充当翻译官的角色
• 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
  一直到重新定义环境中的变量等
• 模式(Mode)指示 webpack 使用相应模式的配置(开发模式和生产模式)。
  webpack 使用相应模式的配置(开发模式和生产模式)后其内部设置也有相应的配置。在开发环境下，webpack 主要是对打包构建速度的优化以及代码调试的优化；而在生产环境中，除了优化打包构建的速度，也要提高代码运行的性能

二、开发环境配置(代码调试的优化)

1、基本配置

module.exports = {
  entry: './src/js/index.js',/ / 入 口 文 件
  output: {/ / 输 出 配 置
    filename: './built.js',/ / 输 出 文 件 名
    path: resolve(__dirname, 'build/js')/ / 输 出 文 件 路 径 配 置
  },
  mode: 'development'/ / 开 发 环 境
};

2、样式资源(css/less)

包：npm i css-loader style-loader less-loader less -D

// loader 的配置 
module: {
  rules: [  // 不同文件必须配置不同 loader 处理
     { // 匹配哪些文件
         test: /\.css$/, // 使用哪些 loader 进行处理 
         use: [ // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行 
            // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效
               'style-loader', 
            // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串
               'css-loader'
             ]
     }, 
     {
         test: /\.less$/,
         use: [ 'style-loader', 'css-loader', // 将 less 文件编译成 css 文件 ,需要下载 less-loader 和 less 'less-loader'
             ]
      }
    ] 
},

3、 HTML 资源

包： npm install --save -dev html-webpack-plugin
默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS）

plugins: [ 
    // 需求：需要有结构的 HTML 文件 
    new HtmlWebpackPlugin({ 
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
        template: './src/index.html'
    })
 ],

4、 图片资源

npm install --save -dev html-loader url-loader file-loader

module: {
   rules: [ 
    {  
      test: /\.less$/, // 要使用多个 loader 处理用use 
      use: ['style-loader', 'css-loader', 'less-loader'] 
    }, {
     // 问题：默认处理不了 html 中 img 图片 // 处理图片资源 test: /\.(jpg|png|gif)$/, 
      // 使用一个 loader // 下载 url-loader file-loader
     loader: 'url-loader', 
     options: {
      // 图片大小小于 8kb，就会被 base64 处理 // 优点: 减少请求数量（减轻服务器压力）
      // 缺点：图片体积会更大（文件请求速度更慢） 
        limit: 8 * 1024, 
      // 问题： 因为url-loader默认使用es6模块化解析， 而html-loader引入图片是commonjs ;解析时会出问题：[object Module]      解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析 
        esModule: false,
      // 给图片进行重命名
      // [hash:10]取图片的 hash 的前 10 位 
      // [ext]取文件原来扩展名 
        name: '[hash:10].[ext]'
      }
    }, 
    {
      test: /\.html$/, 
      // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 进行处理） 
      loader: 'html-loader'
    }
   ]
}, 

5、 其他资源（exclude，'file-loader'）

module: {
   rules: [ 
        ...//这里把之前对css、图片、html文件资源的配置写上
       // 打包其他资源(除了 html/js/css 资源以外的资源) 
       { // 排除 css/js/html 资源 
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader', 
        options: { 
            name: '[hash:10].[ext]' 
         }
       }
   ]
 },

6、 devserver

devServer: { 
  // 项目构建后路径 
  contentBase: resolve(__dirname, 'build'), 
  // 启动 gzip 压缩 
  compress: true, 
  // 端口号 
  port: 3000, 
  // 自动打开浏览器 
  open: true
 } 

三、生产环境配置(代码运行的性能）

1、css文件抽离、兼容处理、压缩

css文件的抽离
npm install --save -dev mini-css-extract-plugin
同时，style-loader将不再使用，mini-css-extract-plugin这个插件的loader将 取代 style-loader，能够提取 js 中的 css 成单独文件

兼容处理
npm install --save -dev postcss-loader postcss-preset-env
配置完postcss loader之后，还需要修改 package.json 中的“browserslist”，通过配置，加载指定的css兼容性模式，
**注意：browserslist默认用production生产模式的配置，如果需要在开发环境下配置，需要在webpack.config.js文件的头部修改，定义为nodejs的环境变量： process.env.NODE_ENV = 'development';
**

压缩（插件）
npm install --save -dev optimize-css-assets-webpack-plugin

module: {
  rules: [  // 不同文件必须配置不同 loader 处理
     { // 匹配哪些文件
         test: /\.css$/, // 使用哪些 loader 进行处理 
         use: [ // use 数组中 loader 执行顺序：从右到左，从下到上 依次执行 
              
              // 'style-loader', 
               MiniCssExtractPlugin.loader, 
               'css-loader',
              //css兼容处理
              {
                loader: 'postcss-loader', 
                options: {
                   ident: 'postcss', 
                   plugins: () => [ // postcss 的插件 
                   require('postcss-preset-env')() 
                   ] 
                }

             ]
     },
    ] 
},
plugins: [ 
  new HtmlWebpackPlugin({ 
    template: './src/index.html' 
  }), 
  new MiniCssExtractPlugin({ // 对输出的 css 文件进行重命名 
    filename: 'css/built.css'
   }),
  // 压缩 css 
  new OptimizeCssAssetsWebpackPlugin()

 ],

// package.json 
"browserslist": { 
  "development": [ 
    "last 1 chrome version",//最新版本的浏览器
     "last 1 firefox version",
     "last 1 safari version"
 ],
 "production": [ 
    ">0.2%",
     "not dead", 
    "not op_mini all" 
  ] 
}

2、js语法检查、兼容性处理、压缩

语法检查
npm install --save -dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
需要在package.json 中 eslintConfig 中设置检查规则

兼容性处理
npm install --save -dev babel-loader @babel/core @babel/preset-env @babel/polyfillcore-js

压缩
//生产环境下会自动压缩 js 代码 mode: 'production

module: {
  rules: [  // 不同文件必须配置不同 loader 处理
     ...//这里是之前的loader配置
      {//js语法检查配置
        test: /\.js$/,
        exclude: /node_modules/, 
        loader: 'eslint-loader', 
        options: { // 自动修复 eslint 的错误 
          fix: true
         },
        enforce:'pre'   //当前loader 优先执行（先做语法检查，再做兼容性处理）
      },
      {//js兼容性处理配置
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader', 
        options: { // 预设：指示 babel 做怎么样的兼容性处理 
          presets: [ 
            [ '@babel/preset-env', 
              { // 按需加载 
                useBuiltIns: 'usage', 
                // 指定 core-js 版本 
                corejs: { version: 3 }, 
                // 指定兼容性做到哪个版本浏览器 
                targets: { 
                  chrome: '60', 
                  firefox: '60', ie: '9', safari: '10', edge: '17' 
                } 
              } 
            ] 
          ] 
        }
      }
    ] 
},
//js压缩
mode: 'production' 

// package.json 
"eslintConfig": {//设置检查规则：
   "extends": "airbnb-base",
   "env": {
     "browser": true
    }
 }

3、html压缩

在HtmlWebpackPlugin添加配置

plugins: [ 
  new HtmlWebpackPlugin({ 
    template: './src/index.html', 
    // 压缩 html 代码 
    minify: { // 移除空格 
      collapseWhitespace: true, 
      // 移除注释 
      removeComments: true 
    } 
  }) 
],