webpack学习笔记（六）优化

1 loader

使用include，缩小编译范围：

rules: [{ 
  test: /\.js$/, 
  include: path.resolve(__dirname, '../src'),
  use: [{
    loader: 'babel-loader'
    }]
  }
]

 2 使用resolve 设置省略的后缀名和默认的文件名

module.exports = {
  resolve: {
    extensions: ['.js','jsx'], //设置省略的后缀
    mainFiles:['index','child'] //设置默认打开的文件名
  }
}

3 目标：第三方模块只打包一次。

1） 第三方模块只打包一次；

2）我们引入第三方模块的时候，要去使用dll文件引入

对于第三方模块，不会经常变化的库，比如 react、 react-dom、 doash等库，打包的时候使用 webpack.dll.js文件：

const path = require('path');
module.exports = {
  mode: 'production',
  entry: {
    vendors: ['lodash','react', 'react-dom'] //这里规定单独打包的文件
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]' //打包生成一个(library)库,库的名字是 vendors，在全局变量中使用 vendors 调用这些库
  }
}

命令行：

{
  "scripts":{
    "build:dll":"webpack --config ./build/webpack.dll.js"
  }
}

这样就会把这几个库中的js打包到 dll文件夹下的 vendors.dll.js

3.2 打包成功之后，如何在业务代码中使用呢？

安装：   import install add-asset-html-webpack-plugin --save 

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports = {
  plugins:[
    new AddAssetHtmlWebpackPlugin({ //向生成的html中添加下面的代码
      filepath: path.resolve(__dirname,'../dll/vendors.dll.js') 
    })
  ]
}

 

 

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    vendors: ['lodash'],
    react: ['react', 'react-dom'],
    jquery: ['jquery']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]', //对生成的library库分析，并把映射关系放再 下面的path中
      path: path.resolve(__dirname, '../dll/[name].manifest.json'),
    })
  ]
}

 

然后在webpack.comm.js中

{
  plugins:[
    webpack.DllReferencePlugin({
      manifest:path.resolve(__dirname,'../dll/vendors.manifest.json')
    })
  ]
}