webpack 常见配置

多页面

重点entry 和 多个HtmlWebpackPlugin实例

var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode:'development',
    entry:{
        about:'./src/about.js',
        home:'./src/home.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'home.html',
            chunks:['home']
        }),
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'about.html',
            chunks:['about']
        })
    ]
}

source-map

// package.json    
devtool:'source-map',// 增加映射文件 会单独生成一个source-map文件 
devtool:'eval-source-map', // 也可以映射，但是不会生成source-map文件

清除包文件夹

let { CleanWebpackPlugin } = require('clean-webpack-plugin');
    plugins: [
                ...
        new CleanWebpackPlugin(),
    ],

实时更新页面

// webpack.config.json
watch:true

跨域实现

配合webpack-dev-server

// weback.config.json
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: { '/api': '' } // 路径重写 这里是把api给删除了
            }
        }
    }

resolve

如果想在页面中使用 bootstrap 的样式，一般会在入口文件中引入

import 'bootstrap'

但是这样引入的 bootstrap 默认引入的是JS文件，所以页面的样式是不会生效的，下面是bootstrap的package的文件中main字段指定的路径

"main": "dist/js/bootstrap",

如果想直接引入样式的话，可以在webpack的配置文件配置

resolve: {
    // mainFields: ['style', 'main'] // 改变入口的文件字段
    alias: {
      'bootstrap': 'bootstrap/dist/css/bootstrap.css'
    }
  }

dllPlugin 优化打包速度

也就是先把库打包出来， 并且生成一个manifest.json文件

1. 定义webpack.dll.config.js

// webpack.dll.config.js
module.exports = {
    entry: {
        // 定义程序中打包公共文件的入口文件vendor.js
        vendor: [path.resolve(src, 'js', 'vendor.js')],
    },
    plugins: [
        new webpack.DllPlugin({
            // manifest缓存文件的请求上下文（默认为webpack执行环境上下文）
            context: process.cwd(),
            // manifest.json文件的输出位置
            path: path.join(src, 'js', 'dll', '[name]-manifest.json'),
            // 定义打包的公共vendor文件对外暴露的函数名
            name: '[name]_[hash]'
        })
    ]
}

1.1 打包公共文件

// cross-env模块需要另外安装
cross-env NODE_ENV=production webpack --config webpack.dll.config.js --colors --display-modules

2. 项目入口文件引入静态公共资源

// main.js
// 引入的公共模块如果在vendor中有被引用过，那么编译的时候直接使用静态文件vendor.dll.js
import $ from 'jquery';
console.log($)
// import Vue from "Vue";
// console.log(Vue)

引入方式并没有什么不同， 跟平时一样

3. 项目模板中引入公共静态文件

<!-- index.html -->
<script type="text/javascript" src="/src/js/dll/vendor.dll.js"></script>

4. 在webpack.config.js中关联引用

// webpack.config.js
module.exports = {
    entry: {
        // 项目入口文件
        'app':path.resolve(src, 'js', 'main.js')
    },
    plugins: [
        // dllPlugin关联配置
        new webpack.DllReferencePlugin({
            // 跟dll.config里面DllPlugin的context一致
            context: process.cwd(), 
            // dll过程生成的manifest文件
            manifest: require(path.join(src, 'js', "dll", "vendor-manifest.json"))
        })
    ]
}

如此，在接下来的本地开发（dev过程）和线上构建过程，将不再重复静态公共资源的构建，极大地缩减我们的构建时间。

使用happypack多线程打包

// webpack.config.js
let Happypack = require('happypack');
...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve('src'),
        use: 'Happypack/loader?id=js'
      },
      {
        test: /\.css$/,
        use: 'Happypack/loader?id=css'
      }
    ]
  },
 ...
   plugins: [
    new Happypack({
      id: 'css',
      use: ['style-loader', 'css-loader']
    }),
    new Happypack({
      id: 'js',
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ]
        }
      }]
    })
   ]

tree-shaking

webapck 在生产模式下自动启用 tree-shaking. 但是前提是使用es6 module引用的模块， 使用 common.js的模块tree-shaking 不起作用

抽取公共代码