玩转webpack笔记

1.自动清理构建目录产物

rm -rf ./dist && webpack
或者
rimraf ./dist && webpack

clean-webpack-plugin(插件)

{
  plugins: [
      new CleanWebpackPlugin()
  ]
}

create-react-app中

const fs = require('fs-extra');

fs.emptyDirSync(paths.appBuild); //确保目录为空。如果目录不为空，则删除目录内容。如果该目录不存在，则会创建该目录。目录本身不会被删除。

2. 自动补齐css3前缀

postcss-loader

cra中

{
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebook/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            require('postcss-preset-env')({
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
            }),
            // Adds PostCSS Normalize as the reset css with default options,
            // so that it honors browserslist config in package.json
            // which in turn let's users customize the target behavior as per their needs.
            postcssNormalize(),
          ],
          sourceMap: isEnvProduction && shouldUseSourceMap,
        },
      }

3. 移动端px 自动转化成rem

px2rem-loader

.page {
  font-size: 12px; /*no*/
  width: 375px; /*no*/
  height: 40px;
}

后面有 /*no*/这种注释语法会不进行 rem 的转换

目前官方推荐我们使用vw、vh进行适配，postcss-px-to-viewport

4. 静态资源内联（代码层面、请求层面）

代码层面：初始化脚本；上报相关打点；css内联避免页面闪动；

请求层面：减少http请求数（url-loader）

raw-loader  内联html，js脚本

index.html

${ require('raw-loader!./meta.html')} // html-webpack-plugin 默认使用ejs引擎的语法，可以用${}; 内联loader也是从右到左执行

css内联

1⃣️借助style-loader

2⃣️html-inline-css-webpack-plugin

5.多页面应用打包通用方案

动态获取entry和设置html-webpack-plugin数量
利用glob.sync  (require('glob'))

function setMPA(){
   let entry = {}
   let HtmlWebpackPlugin = []
　 let files = glob.sync(path.join(__dirname, './src/*/index.js'))
   Object.values(files).map( (file) => {
      const match = file.match(/src\/(.*)\/index.js/)
      const pageName = match && match[1]
      entry[pageName] = file
      HtmlWebpackPlugin.push( new HtmlWebpackPlugin({
　　　　　　...

      }))
   }

　　return {
       entry,
　　　　HtmlWebpackPluguin
   }
}

{
     entry: setMPA().entry

6. 提取页面公共资源(基础库等的分离也通常用splitChunksPlugin)

7. 代码分割和动态import

1⃣️ 抽离相同代码到一个共享快

2⃣️ 脚本懒加载，使得初始下载的代码更小（require.ensure比较老）

可以使用react-loadable或者自己封住个异步加载的函数，关键代码为 const { default: component } = await import('./index.js')

8. webpack打包库和组件；（支持AMD、CJS、ESM）模块引入

实现一个大整数加法库的打包（33课程）

1⃣️ npm init -y

2⃣️ npm i webpack webpack-cli -D

3⃣️ 创建 webpack.config.js、index.js、src/index.js

具体借鉴（https://github.com/geektime-geekbang/geektime-webpack-course/tree/master/code/chapter03/large-number）

9. 构建配置包设置

猜你喜欢