基本使用

高级特性

css

开发环境下 style-loader

生产环境

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')


module.exports = smart(webpackCommonConf, {
    mode: 'production',
    module: {
      rules: [
        ...
         // 抽离 css
          {
              test: /\.css$/,
              loader: [
                  MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                  'css-loader',
                  'postcss-loader'
              ]
          },
          // 抽离 less
          {
              test: /\.less$/,
              loader: [
                  MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                  'css-loader',
                  'less-loader',
                  'postcss-loader'
              ]
          }
      ]
    },
   plugins: [
        new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
        new webpack.DefinePlugin({
            // window.ENV = 'production'
            ENV: JSON.stringify('production')
        }),

        // 抽离 css 文件
        new MiniCssExtractPlugin({
            filename: 'css/main.[contentHash:8].css'
        })
     ...
     ],
   optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
     ...
   }
 

webpack5 和webpack4 差异

package. j son 的 dey-server 命令改了〝"dev"："webpack serve --config build/ webpack. dev.js",

• 升级新版本 const { merge } = require( 'webpack-merge")
• 升级新版本 const { CleanwebpackPlugin } = require( 'clean-webpack-p Lugin"）
• module. rules 中 Loader: ['xxx-loader ']换成use: [ 'xxx-loader']
• filename:/bundle. [contenthash:8].js" 其中h小写，不能大写

---

题目

前端为何要进行打包和构建？

• 体积更小（Tree-Shaking、压缩、合并），加载更快

• 编译高级语言或语法（TS，ES6+，模块化，Scss

• 兼容性和错误检查(Polyfil, postcss、 eslint)

• 统一、高效的开发环境

• 统一的构建流程和产出标准

• 集成公司构建规范（提测、上线等）

loader 和 plugin 的区别

• loader 模块转换器，如 less -> css
• plugin 扩展插件，如 HtmlWebpackPlugin

常见 loader 和 plugin 有哪些

babel 和 webpack 的区别

• babel -JS 新语法编译工具，不关心模块化
• webpack一打包构建工具，是多个 loader plugin 的集合

babel-polyfill 和 babel-runtime 的区别

• babel-polyfill 会污染全局
• babel-runtime 不会污染全局
• 产出第三方 li 要用 babel-runtime

webpack 如何实现懒加载

• import()
• 结合 Vue React 异步组件
• 结合 Vue-router React-router 异步加载路由

webpack 优化构建速度（可用于生产环境）

• l-loader
• happyPack
• IgnorePlugin
• ParallelUglifyPlugin
• noParse