webpack优化配置

最新推荐文章于 2024-07-01 12:45:00 发布
最新推荐文章于 2024-07-01 12:45:00 发布
阅读量423 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChristWTF/article/details/104979574
版权

文章目录

一 HMR

1. webpack.config.js

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

/*
* HMR: hot module replacement 热模块替换
* 样式文件：可以使用HMR，因为style-loader内部实现了
* JS文件：默认不使用HMR，需要修改入口文件JS代码来监听其他JS文件的变化
*   且入口文件没有HMR功能，当入口文件改变，所有文件会被重新编译
* html文件：当开启HMR功能后，html文件改变不会进行重新编译
*   需在entry中加入html文件
*
* */

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },

          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.css'
    }),
    new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

2. index.js

import './base.less';
import './index.css';

if(module.hot){ //module.hot为true说明开启了HMR功能
  module.hot.accept('./print.js', function(){
    //监听print.js文件的变化 一旦发生变化，其他模块不会重新打包，且执行后面的回调函数
    print()
  })
}

二 source-map

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

/*
* source-map 一种提供源代码到构建后代码映射技术，如果构建后代码出错了，通过映射可以追踪源代码错误的语句）
* source-map 外部
*   错误代码原因 和 源代码的错误位置
* hidden-source-map 外部
*   错误代码原因 和 不能追踪源代码的错误位置，只提示构建后代码的错误位置
* nosources-source-map 外部
*   错误代码原因 但没有任何源代码信息
* cheap-source-map 外部
*   错误代码原因 和 源代码的错误位置 精确到行
* cheap-module-source-map 外部
*   错误代码原因 和 源代码的错误位置
*   module会将loader的source map 加入
* inline-source-map 内联
*   只生成一个内敛source-map
*   错误代码原因 和 源代码的错误位置
* eval-source-map 内联
*   每个文件生成对面source-map，都在eval函数里
*   错误代码准确信息 和 源代码的错误位置
*
*   内联和外部的区别：1.外部生成了文件，内联没有 2.内联构建速度更快
*
* 开发环境建议用 eval-source-map / eval-cheap-module-source-map
* 生产环境建议用 source-map / cheap-module-source-map
*   如果要隐藏代码可以用 nosources-source-map / hidden-source-map
* * */

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },

          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.css'
    }),
    new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

三 oneOf

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.js',
    path: resolve(__dirname, 'build')
  },
  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        //oneOf: 若多个配置有用到相同的loader，则只加载一个，减少资源消耗
        //但是oneOf中不能有两个配置处理同一种类型文件
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },

          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ]
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.css'
    }),
    new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

四 缓存

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

/*
* babel缓存 文件再次编译的时候会优先从缓存中取
*   cacheDirectory: true
* 文件资源缓存
*   hash: 每次webpack构建时会生成一个唯一的hash值
*     问题：js和css会同时使用同一个hash值，当只改变一个文件时，重新打包会使缓存失效
*   chunkhash：根据chunk生成的hash值，如果打包来源于同一个chunk，那么hash值就一样
*     问题：js和css的值还是一样的，因为css是在js中被引入的，所以同属于一个chunk
*   contenthash：根据文件内容生成hash值，不同文件hash值一定不一样
* */

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },

          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ],
              cacheDirectory: true
            }
          }
        ]
      }

    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.[contenthash:10].css'
    }),
    new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

五 tree shaking

1. webpack.config.js配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')

/*
* tree shaking: 去除无用代码
*   前提：1. 使用es6模块化 2.开启production环境
* package.json中的配置
*   "sideEffects": false 所有代码没有副作用
*     问题：可能会把css等直接引入但在js文件中没有使用的文件给抹去
*   "sideEffects": ["*.css"]    //css不被优化
* */

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ],
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.[contenthash:10].css'
    }),
    new cssCompress()
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

2. package.json配置

{
  "name": "web-pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "core-js": "^3.6.4",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  },
  "dependencies": {
    "file-loader": "^6.0.0",
    "html-loader": "^0.5.5",
    "url-loader": "^4.0.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "sideEffects": ["*.css"]
}

六 PWA

1. 安装workbox-webpack-plugin

npm i workbox-webpack-plugin -D

2. webpack.config.js

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')
const workBox = require('workbox-webpack-plugin')

//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: {
                      version: 3
                    },
                    targets: {
                      chrome: '60',
                      firefox: '60',
                      ie: '9',
                      safari: '10',
                      edge: '17'
                    }
                  }
                ]
              ],
              cacheDirectory: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.[contenthash:10].css'
    }),
    new cssCompress(),
    new workBox.GenerateSW({
      /*
      * 1. 帮助serviceworker快速启动
      * 2. 删除旧的 serviceworker
      * */
      clientsClaim: true,
      skipWaiting: true
    })
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

3. index.js

import './base.less';
import './index.css';

/* 1. eslint不认识 window navigator全局变量
      解决：在package.json中eslintConfig配置
   2. sw代码必须运行在服务器上
      npm i serve -g
      serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
*/
// 注册 serviceWorker 处理兼容性问题
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(() => {
        console.log('注册成功');
      })
      .catch(() => {
        console.log('注册失败');
      });
  });
}

4. package.json

{
  "name": "web-pack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "core-js": "^3.6.4",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.1.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^1.1.3",
    "webpack": "^4.42.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "workbox-webpack-plugin": "^5.1.1"
  },
  "dependencies": {
    "file-loader": "^6.0.0",
    "html-loader": "^0.5.5",
    "url-loader": "^4.0.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },
  "sideEffects": [
    "*.css"
  ]
}

七 多进程打包

1. 安装thread-loader

npm i thread-loader -D

2. 配置

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')
const workBox = require('workbox-webpack-plugin')


//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            /*开启多进程打包，但是要注意，一般给打包时间很长的过程才启用多线程
            * 因为启动进程大概600ms，进程通信也要开销*/
            use:[
              'thread-loader',
              {
                loader: 'babel-loader',
                options: {
                  presets: [
                    [
                      '@babel/preset-env',
                      {
                        useBuiltIns: 'usage',
                        corejs: {
                          version: 3
                        },
                        targets: {
                          chrome: '60',
                          firefox: '60',
                          ie: '9',
                          safari: '10',
                          edge: '17'
                        }
                      }
                    ]
                  ],
                  cacheDirectory: true
                }
              }
            ],
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.[contenthash:10].css'
    }),
    new cssCompress(),
    new workBox.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  }
}

八 externals

const {resolve} = require('path')
const htmlPlugin = require('html-webpack-plugin')
const cssPlugin = require('mini-css-extract-plugin')
const cssCompress = require('optimize-css-assets-webpack-plugin')
const workBox = require('workbox-webpack-plugin')


//设置nodejs环境变量
process.env.NODE_ENV = 'development'

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'js/build.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
//优先执行
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true
        }
      },
      {
        oneOf: [
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          },
          {
            test: /\.css$/,
            use: [cssPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-preset-env')()
                  ]
                }
              }
            ]
          },
          {
            test: /\.(jpg|png|gif)$/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              esModule: false,
              outputPath: 'imgs'
            }
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(html|js|css|less|png|jpg|gif)$/,
            loader: 'file-loader',
            options: {
              name: '[hash:10].[ext]',
              outputPath: 'media'
            }
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            /*开启多进程打包，但是要注意，一般给打包时间很长的过程才启用多线程
            * 因为启动进程大概600ms，进程通信也要开销*/
            use:[
              'thread-loader',
              {
                loader: 'babel-loader',
                options: {
                  presets: [
                    [
                      '@babel/preset-env',
                      {
                        useBuiltIns: 'usage',
                        corejs: {
                          version: 3
                        },
                        targets: {
                          chrome: '60',
                          firefox: '60',
                          ie: '9',
                          safari: '10',
                          edge: '17'
                        }
                      }
                    ]
                  ],
                  cacheDirectory: true
                }
              }
            ],
          }
        ]
      }
    ]
  },
  plugins: [
    new htmlPlugin({
      template: "./src/index.html",
//html压缩
      minify: {
        collapseWhitespace: true, //移除空格
        removeComments: true      //移除注释
      }
    }),
    new cssPlugin({
      filename: 'css/build.[contenthash:10].css'
    }),
    new cssCompress(),
    new workBox.GenerateSW({
      clientsClaim: true,
      skipWaiting: true
    })
  ],
//生产环境下自动压缩js代码
  mode: 'production',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true,
    devtool: 'source-map'
  },
  externals: {
//拒绝jQuery被打包进来 但是需要手动在html文件中进行引入
    jquery: 'jQuery'
  }
}
超人不会飞/
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于webpack5的优化配置项
04-19
基于webpack5的优化配置项 optimmization
Webpack优化配置缩小文件搜索范围
08-28
Webpack 优化配置缩小文件搜索范围 在使用 Webpack 时，缩小文件搜索范围是非常重要的优化配置。因为 Webpack 在启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归的解析。在遇到导入语句时，Webpack ...
5. webpack 优化配置
小丕的博客
03-13 294
第 5 章：webpack 优化配置 * 开发环境性能优化 * 生产环境性能优化 开发环境性能优化 * 优化打包构建速度 * HMR * 优化代码调试 * source-map 生产环境性能优化 * 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll * 优化代码运行的性能 * 缓存(hash-chunkhash-contenthash) * tree shaking * code split * 懒加载/
Webpack: 构建优化
最新发布
Wang的专栏
07-01 978
前面章节我们已经详细探讨 Webpack 中如何借助若干工具分析构建性能，以及如何使用缓存与多进程能力提升构建性能的基本方法与实现原理，这两种方法都能通过简单的配置，极大提升大型项目的编译效率。使用最新版本 Webpack、Node；配置resolve控制资源搜索范围；针对 npm 包设置跳过编译步骤；等等。下面我们一一展开，解释每条最佳实践以及背后的逻辑。
四、webpack优化配置
hbmern的博客
02-14 804
webpack性能优化 1、开发环境性能优化 优化打包构建速度 （1）HMR：hot module replacement 热模块替换 作用：一个模块发生变化，只会重打包这个模块（而不是打包所有模块），极大提升构建速度 样式文件：可以使用HMR功能，因为style-loader内部实现了 JS文件：默认不能使用HMR功能 --->需要修改js代码，添加支持HMR功能的代码,例如 if(module.hot){ //一旦module.hot为true,说明开启了HMR功能，-..
webpack优化
lb6514052的博客
04-13 4140
webpack优化很有必要 上一篇文章给大家讲解了简单搭建一个Vuecli，但是只是基本搭建，而没有进行进一步的优化。 而使用webpack打包躲不开的就是webpack优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情，毕竟提升用户体验是我们前端工程师的职责 构建时间优化 首先就是构建时间的优化了 thread-loader 多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader ...
webpack 配置哪些优化？
weixin_33709590的博客
04-17 945
1.忽略依赖库的解析 module.exports = { //... module: { noParse: /jquery|lodash/, //不去解析jquery | lodash 中的依赖库 } }; 复制代码如果js中引入jquery, webpack会去解析jq中是否有依赖库，配置noParse后打包时候忽略解析配置的库，提高打包效率。 2.解析时指定和排除查找目录...
webpack高级配置与优化详解
10-15
主要介绍了webpack高级配置与优化,其中包括了webpack打包多页面，webpack跨域问题等相关内容
webpack基本配置
03-08
Webpack 是一个流行的前端模块打包工具，它允许...总的来说，Webpack的基本配置涉及到项目结构的组织、资源的处理方式以及打包的输出设定，是前端开发中的重要环节，能够帮助优化项目的构建流程，提高开发和部署效率。
Webpack配置.docx
05-15
在前端开发中，Webpack 常与Vue、React等现代框架配合使用，以实现模块化开发和优化。 在开始配置Webpack之前，你需要确保已经安装了最新版本的Node.js和npm。接着，按照以下步骤进行配置： 1. 初始化项目：使用`...
webpack配置优化
Annie的博客
07-02 415
    前面学习了在项目中使用webpack对各种类型的文件进行处理和打包，但是在开发过程中，不停的build并不友好，我们需要区分正式环境和开发环境。使用webpack-dev-server可以提升开发过程中体验和效率。首先也需要在package.json中进行配置：'script':{ 'build': 'webpack --config webpack.config.js', //用于正...
你不知道的 Webpack 性能优化配置
高先生的猫
03-30 317
目录 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念：「HMR：」 hot module replacement 热模块替换 / 模块热替换 ❞ 作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块，极大的提升了构建速度 样式文件...
webpack-性能优化配置
cherrylovedog的博客
08-05 132
webpack性能优化 开发环境优化 生产环境优化 开发环境性能优化 优化打包构建速度（webpack打包速度会更快，体积庞大了，速度变慢，所以我们要优化速度） 优化代码 调试（source map定位错误位置等信息） 生产环境性能优化 优化打包构建速度 优化代码运行的性能 HMR（hot module repacement 模块热替换） 注意：修改了webpack,config.js文件后，一定要停掉重新编译一遍 作用：一个模块发生变化，只会重新打包这个模块（比如修改css样式，不应该重新打
WEBPACK高级配置【优化配置】
m0_52743009的博客
06-23 1161
【webpack】高级配置（优化配置）
webpack由浅入深——（webpack优化配置）
大灰狼的小绵羊哥哥的博客
10-28 985
webpack系列文章 webpack由浅入深——（webpack基础配置） webpack由浅入深——（webpack优化配置） webpack由浅入深——（tapable） webpack由浅入深——（ast） webpack由浅入深——（webapck简易版） webpack由浅入深——（loader实现） webpack由浅入深——（plugin实现） 开发优化 开发时的优...
Webpack优化
qq_44588612的博客
07-29 2553
本篇文章详细讲解了webpack的优化
性能优化---webpack优化
sinat_34896766的博客
04-17 1400
a、优化Loader--影响Loader打包速度的首要元素是Babel，Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，d、代码压缩--不止可以压缩 JS 代码，还可以压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，我们还可以通过配置实现比如删除。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案。起来，下次只需要编译更改过的代码文件即可，这样可以大幅度加快打包时间。
优化Webpack构建性能的几点建议
葡萄城技术团队博客
12-26 4782
在开发现代Web应用的过程中，Webpack和我们的开发过程和发布过程都息息相关，如何改善Webpack构建打包的性能也关系到我们开发和发布部署的效率。
webpack 优化配置
mnbcx123的博客
05-30 216
HMR const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: ['./src/js/index.js', './src/index.html'], output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值