webpack

[yongheng2016]

webpack打包性能

new webpack.DllPlugin({
 
})

webpack.DllPlugin 的选项中：

• path 是 manifest.json 文件的输出路径，这个文件会用于后续的业务代码打包；
• name 是 dll 暴露的对象名，要跟 output.library 保持一致；
• context 是解析包路径的上下文，这个要跟接下来配置的 webpack.config.js 一致。

---

代码分割：

import ('xxx').then(function (css) {
console.log(0
})

1. babel 注意后面使用的插件要和这里的版本对应

npm i [email protected] @babel/core  
或
npm i -D babel-loader babel-core

2. babel presets (打包规范)

es2015
es2016
es2017
env (es2015, es2016, es2017 ,latest)  // 常用
babel-preset-react
babel-preset-state 0-3  // 包含未发布的规范

npm i -D @babel/preset-env  // 最新loader对应的preset
npm i -D babel-preset-env  // 普通版本

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env', {
           targets: {
             browsers: ['> 1%', 'last 2 versions']
           }
        }]
      ]
    }
  },
  exclude: /node_modules/
}

3.1 babel polyfill 全局垫片/开发应用、网站准备 [3-3]

npm i -S babel-polyfill

/entry.js
import 'babel-polyfill'

3.2 babel runtime transform 局部垫片/为开发框架准备 [3-3]

npm i -D babel-plugin-transform-runtime
npm i -S babel-runtime
或
npm i -D @babel/plugin-transform-runtime
npm i -S @babel/runtime

/.babelrc

{
      "presets": [
        ["@babel/preset-env", {
           "targets": {
             "browsers": ["> 1%", "last 2 versions"]
           }
        }],
        "plugins": ["@babel/transform-runtime"]
}

⚠️注意：安装transform-runtime 要和babel对应

• 带@ 使用 @babel/transform-runtime
• 普通版 使用 tranform-runtime

4. typescript loader [3-4]

• 安装：

npm i -D ts-loader  / /官方推荐
或
npm i -D awesome-typescript-loader 

• 配置
  • /tsconfig.json

compilerOptions    
include
exclude
{
  "compilerOptions": {
    "modules"
  }
}

• /webpack.config.js

{
  test: /\.tsx?$/,
  exclude: /node_modules/,
  use: {
    loader: 'ts-loader'
  }
}

⚠️注意：ts文件中使用第三方库js，如：loadash, vue ， 如何添加声明文件 npm i @types/loadash @types/vue 或 npm i typings typings i loadash 配置/tsconfig.josn

"compilerOptions": {
  "typeRoots": [
  "./node_modules/@type",  // 使用@types/loadash  方法安装是的默认路径，可不配
  "./typing/modules"  //使用typings 安装后生成的声明文件地址
  ]
}

5. 提取公共代码 webpack.optimize.CommonsChunkPlugin [3-5, 3-6]

// 针对多入口文件

entry: './src/main.js',
output: {
  path: path.resolve(__dirname, './dist'),
  filename: '[name].bundle.js',
  publicPath: './dist/',  // 动态加载的代码路径
  chunkFilename: '[name].chunk.js'
}
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: 'xxx' ,   // 1. 已知chunk的名称, 提取此chunk的common部分  2.  数组 按里面的名称新建多少个文件
  filename: '名称'，
  minChunks: num, Infinity, function
  }) ,
  async: boolean  // 异步代码块
]

第三方依赖单独打包：

entry: {
 main: './main.js',
 vender: ['react', 'react-dom',...]
}
new webpack.optimize.CommonsChunkPlugin({
  name: 'vender',  //必须对应entry中的vender
  minchunks: Infinity
})

6.1 处理css style-loader [3-9, 3-10]

style-loader  options.transform  //当css插入到文档中，执行方法
style-loader/url  配置file-loader  link的形式  // 小众，增加css网络请求

style-loader/useable   
    import base form './index.css'
    base.use();
    base.unuse();

6.2 css-loader [3-11]

{
  loader: 'css-loader',
  options: {
    minimize: true || {/* CSSNano Options */}     // css压缩
  }
}

6.3 Less/Sass [3-12]

npm i -D less-loader less
npm i -D sass-loader node-sass

提取css文件 ExtractTextPlugin

const ExtractTextPlugin = require('extract-text-webpack-plugin')

new ExtractTextPlugin({
  filename: 'index.css',
  allChunks: true  // 异步动态加载参数
})

6.4 PostCsss

• PostCss
• Autoprefixer // 添加浏览器前缀
• Css-nano // 压缩css
• Css-next // 使用未来css语法
  • CSS Variables
  • custom selectors
  • calc()

npm i -D postcss postcss-loader autoprefixer autoprefixer cssnano postcss-cssnext

7. tree shaking

• js tree shaking
• css tree shaking

1.  webpack.optimize.UglifyJsPlugin() . // 本地js treeshaking

2. 第三方库 tree shaking?
loadash // 没作用
loadash-es  // 没作用
babel-plugin-loadash 起作用

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
       preset: ['env'],
       plugins: [''loadash]
     }
  }
}

---

• webpack-for-react