webpack-doc

npm init lesson
npm install webpack-cli --save-dev
npx webpack index.js

2-2 什么是模块打包工具

---

• ES Module 模块引入方式
  export default Header
import Header from './header.js'
• CommonJS模块引入方式
  module.exports = Header
var Header = require('./header.js')
  CMD
  AMD
• webpack 模块打包工具
  npx webpack index.js

https://www.webpackjs.com/concepts/modules/
https://www.webpackjs.com/api/module-methods/
https://www.webpackjs.com/api/module-variables/

2-3 webpack的正确安装方式

---

cd webpack-demo
npm init -y
npm install webpack webpack-cli -D
npx webpack -v   # npx会就近查找webpack
# old version
npm webpack info
npm install webpack@4.16.5 webpack-cli  -D

---

2-4 使用webpack的配置文件

npx webpack index.js  # right
npx webpack  # error own not found entry

• webpack.config.js

const path = require('path');
module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

• rename config name

npx webpack --config webpackconfig.js

• npm scripts ==> npm run bundle

package.json
"scripts":  {
    "bundle": "webpack"    # npm run bundle <=> npx webpack  
}

https://www.webpackjs.com/guides/getting-started/

2-5 浅析 Webpack 打包输出内容

---

• webpack.config.js

module.exports = {
  mode: 'production',  # production文件会被压缩；development不压缩
}

4-1 Tree Shaking 概念详解

---

Tree Shaking只支持ES Module
mode为production时，会筛出没有用到的代码

• webpack.config.js

mode: 'production',
devtool: 'cheap-module-source-map',

mode: 'development',
devtool: 'cheap-module-eval-source-map',
optimization: {
  usedExports: true
},

• package.json

# 不对指定文件进行tree shaking
"sideEffects":  [
  "@babel/polly-fill",
  "*.css"
],  

4-10 Webpack 与浏览器缓存( Caching )

---

import _ from 'lodash';
import $ from 'jquery';

const dom = $('<div>');
dom.html(_.join(['Kelvin', 'Van']), '  ')
$('body').append(dom)

• manifest: main.js 与 vendor.js的关联关系
• webpack.common.js

optimization: {
  runtimeChunk: { # 老版本将manifest抽取出来
    name: 'runtime'
  },
  usedExports: true,
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        name: 'vendors',  # 修改vendor文件的名称
      }
    }
  }
}

• webpack.prod.js

output: {
  filename: '[name].[contenthash].js',
  chunkFilename: '[name].[contenthash].js'
}

4-12 环境变量的使用方法

• webpack.common.js

module.exports = (env) => { # env是全局变量
  if (env && env.production) {
    return merge(commonConfig, prodConfig);
  } else {
    return merge(commonConfig, devConfig);
  }
}

• package.json

"scripts": {
  "build": "webpack --env.production --config ./build/webpack.common.js"
}