webpack 之 webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map

一、webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map

1. 当前构建时的问题，每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多。通过 npm scripts 清理构建目录，如下所示：

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

2. 自动清理构建目录，避免构建前每次都需要手动删除 dist，使用 clean-webpack-plugin，默认会删除 output 指定的输出目录，代码如下：

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name][chunkhash:8].js',
    path: _dirname + '/dist'
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};

3. CSS3 的属性为什么需要加前缀，如下所示：

• Trident(-ms)
• Geko(-moz)
• Webkit(-webkit)
• Presto(-o)

4. PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀，使用 autoprefixer 插件，根据 Can I Use 规则，代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                require('autoprefixer')({
                  browsers: ["last 2 version", "> 1%", "IOS 7"]
                })
              ]
            }
          }
        ]
      }
    ]
  }
};

5. CSS 媒体查询实现响应式布局，缺陷是需要写多套适配样式代码，代码如下：

@media screen and (max-wdith: 980px) {
  .header {
    width: 900px;
  }
}
@media screen and (max-wdith: 480px) {
  .header {
    width: 400px;
  }
}
@media screen and (max-wdith: 350px) {
  .header {
    width: 300px;
  }
}

6. rem 是什么，WSC 对 rem 的定义是 font-size of the root element，rem 和 px 的对比，rem 是相对单位，px 是绝对单位。
7. 移动端 CSS px 自动转换成 rem，使用 px2rem-loader。页面渲染时计算根元素的 font-size 值，也可以使用手淘的 lib-flexible 库，代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
          {
            loader: 'px2rem-loader',
            options: {
              remUnit: 75,
              remPrecision: 8
            }
          }
        ]
      }
    ]
  }
};

8. 资源内联的意义，如下所示：

• 代码层面，页面框架的初始化脚本，上报项相关打点，css 内联避免页面闪动
• 请求层面，减少 HTTP 网络请求数，小图片或者字体内联

9. HTML 和 JS 内联，raw-loader 内联 HTML 和 JS。CSS 内联可以借助 style-loader，或者是 html-inline-css-webpack-plugin，代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top', 
              singleton: true,
            }
          },
          'css-loader',
          'sass-loader',
        ]
      }
    ]
  }
};

10. 多页面应用(MPA)概念， 每一次页面跳转的时候，后台服务器都会给返回一个新的 html 文档，这种类型的网站也就是多页网站，也叫做多页应用。
11. 多页面打包基本思路，每个页面对应一个 entry，一个 html-webpack-plugin，缺点是每次新增或删除页面需要改 webpack 配置，代码如下：

module.exports = {
  entry: {
    index: './src/index.js',
    search: './src/search.js'
  }
};

12. 多页面打包通用方案，动态获取 entry 和设置 html-webpack-plugin 数量，利用 glob.sync，例如：entry:glob.sync(path.join(_dirname, './src/*/index.js'))，代码如下：

module.exports = {
  entry: {
    index: './src/index/index.js',
    search: './src/search/index.js'
  }
};

13. 使用 source map，通过 source map 定位到源代码，开发环境开启，线上环境关闭，线上排查问题的时候可以将 sourcemap 上传到错误监控系统。source map 的关键字，如下所示：

• eval：使用 eval 包裹模块代码
• source map：产生 .map 文件
• cheap：不包含列信息
• inline：将 .map 作为 DataURL 嵌入，不单独生成 .map 文件
• module：包含 loader 的 sourcemap

14. source map 类型，如下所示：

• (none)，适合生产环境，可以定位的代码是最终输出的代码
• eval，不适合生产环境，可以定位的代码是 webpack 生成的代码，一个个的模块
• cheap-eval-source-map，不适合生产环境，可以定位的代码是经过 loader 转换后的代码，只能看到行
• cheap-module-eval-source-map，不适合生产环境，可以定位的代码是源代码，只能看到行
• eval-source-map，不适合生产环境，可以定位的代码是源代码
• cheap-source-map，适合生产环境，可以定位的代码是经过 loader 转换后的代码，只能看到行
• cheap-module-source-map，适合生产环境，可以定位的代码是源代码，只能看到行
• inline-cheap-source-map，不适合生产环境，可以定位的代码是经过 loader 转换后的代码，只能看到行
• inline-cheap-module-source-map，不适合生产环境，可以定位的代码是源代码，只能看到行
• source-map，适合生产环境，可以定位的代码是源代码
• inline-source-map，不适合生产环境，可以定位的代码是源代码
• hidden-source-map，适合生产环境，可以定位的代码是源代码