webpck4新特性

—mode=development|production
development模式下，将侧重于功能调试和优化开发体验
production模式下，将侧重于模块体积优化和线上部署

注意： webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分，下面的代码即是optimize.splitChunks 中的一些配置参考

预备/默认配置

  1. mkdir <fileName>
  2. $file touch index.html index.js
  3. yarn init -y  // 初始化package.json
  4. npx webpack --version // 4.43.0

编辑index.html, 引入index.js

  1. <body>
  2. <script src="./index.js"></script>
  3. </body>

index.js

  1. import { names } from './name'
  2. console.log("hello", names.join(','))

name.js

  1. const names = ['Jack', 'Lucy'];
  2. export names

默认打包

  1. npm i webpack webpack-cli --dev
  2. npx webpack
  3. ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/zc/Workspace/useWebpack'

解决： 移动js文件到src/
默认会自动从src/index.js 文件开始打包， 打包存放到dist/main.js

  1. "build": "webpack"
  2. npm run build // 代替npx webpack

配置项

babel解析es6

  1. npm i @babel/core @babel/preset-env babel-loader
  2. //          8.x.x        7.x.x           1.x.x

webpack.config.js

  1. module.exports = {
  2.     mode: "development",
  3.     module: {
  4.       rules: [
  5.         {
  6.           test: /\.js$/,
  7.         exlude: /node_modules/,
  8.         use: {
  9.             loader: 'bable-loder'
  10.         }
  11.       }
  12.     ]
  13.   },
  14.     devtool: "source-map",
  15. }

.babelrc

  1. {
  2.     "presets": ["@babel/preset-env"]
  3. }

修改为观察状态

  1. "build": "webpack --watch"

webpack-dev-server

  1. npm i webpack-dev-server --dev
  1. devServer: {
  2.     contentBase: './dist'
  3. }

添加指令

  1. "start": 'webpack serve'

添加入口

  1. const path = require('path')
  3. entry: './src/index.js',
  4. output: {
  5.     filename: 'bundle.js',
  6.   path: path.resolve(__dirname, 'dist')
  7. }

设置ENV

  1. "build": "NODE_ENV=production webpack --watch",
  2. "build:dev": "webpack --watch"

读取

  1. const mode = process.env.NODE_ENV === "production" ? "production" : "development";
  3. mode: mode

配置启动后自动打开编辑器

  1. // webpack 命令
  2. // 已验证,打开http://0.0.0.0:9000/
  3. $ webpack-dev-server --open
  4. // webpack 配置文件
  5. // 已验证， 可打开
  6. devServer: {
  7.    open: true
  8. }
  9. // vue-cli2.0构建项目
  10. dev: {
  11.    autoOpenBrowser: true,
  12. }// webpack 命令
  13. // 已验证,打开http://0.0.0.0:9000/
  14. $ webpack-dev-server --open
  15. // webpack 配置文件
  16. // 已验证， 可打开
  17. devServer: {
  18.    open: true
  19. }
  20. // vue-cli2.0构建项目
  21. dev: {
  22.    autoOpenBrowser: true,
  23. }

build过滤console, terser-webpack-plugin

⚠️ 当前最新@^5, 与webapck4匹配需要@^2

  1. npm install terser-webpack-plugin@^2 --save-dev 
  3. const TerserPlugin = require('terser-webpack-plugin')
  4.   optimization: {
  5.     // minimize: true,
  6.     minimizer: [
  7.       new TerserPlugin({
  8.         terserOptions: {
  9.           compress: {
  10.             drop_console: true
  11.           }
  12.         }
  13.       })
  14.     ],
  15.    }

webpack之前