webpack 工程化实战

工程化考虑因素

1. PC还是移动端
   1. 移动端 spa
      1. ssr
   2. pc端 mpa
   3. 兼容的浏览器和版本
2. 多人参与还是单人
   1. 多人合作
      1. 代码规范，Eslint + prettier
      2. 提交规范，commit规范，ci/cd
3. 技术栈
   1. vue
   2. react
   3. 样式处理器
      1. less
      2. sass
   4. 语法
      1. ts
      2. es6+
   5. 模板引擎
      1. ejs
      2. pug
   6. 是否要支持第三方字体
4. 工具类
   1. 安装依赖包，切换国内源
   2. 配置.npmrc 设置npm默认的项目源
5. 测试
   1. 单元测试
   2. 集成测试
   3. e2e测试

webpack配置

// webpack.config.js
const path = require('path')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  // entry: {
  //   index: './src/index.js',
  //   login: './src/login.js'
  // },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name]-[chunkhash:7].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          // miniCssExtractPlugin.loader, 
          // 'css-loader', 
          // 'postcss-loader', 
          // 'less-loader'
          'kkb-style-loader',
          'kkb-css-loader',
          'kkb-less-loader',
        ]
      },
      {
        test: /\.js$/,
        use: [
          'replace-loader',
          {
            loader: 'replace-loader-async',
            options: {
              name: '赵日天'
            }
          }
        ]
      }
    ]
  },
  resolveLoader: {
    modules: ['node_modules', './myLoaders']
  },
  plugins: [
    new htmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      // chunks: ['index'],
    }),
    // new htmlWebpackPlugin({
    //   template: './src/index.html',
    //   filename: 'login.html',
    //   chunks: ['login'],
    // }),
    new CleanWebpackPlugin(),
    // new miniCssExtractPlugin({
    //   filename: 'css/[name]-[chunkhash:7].css',
    // })
  ]
}
// myLoaders/replace-loader,
module.exports = function (source) {
  const result = source.replace("hello", '哇塞')
  return result;
}
// myLoaders/replace-loader-async
module.exports = function (source) {
  const callback = this.async()
  setTimeout(() => {
    const result = source.replace("老王", this.query.name)
    callback(null, result);
  }, 1000)
}
// myLoaders/kkb-style-loader
module.exports = function (source) {
  return `const e = document.createElement('style')
    e.innerHTML = ${source}
    document.head.appendChild(e)
  `
}
// myLoaders/kkb-less-loader
const less = require('less')
module.exports = function (source) {
  less.render(source, (e, output) => {
    this.callback(e, output.css)
  })
}
// myLoaders/kkb-css-loader
module.exports = function (source) {
  return JSON.stringify(source)
}