webpack深入学习

一、webpack可以做哪些事情？

代码转换(ES6-ES5，scss/less-css)、文件优化(压缩代码体积，合并文件等)、代码分割（开发多页面应用的时候，实现公共模块的分离）、模块合并（按照功能将多模块合并为一个模块）、自动刷新（热更新）、代码校验、自动发布

二、webpack常见配置

1.手动修改webpack.config.js文件名称：webpack --config webpack.config.my.js

2.在package.json中配置：

'scripts': {
    'build': 'webpack --config webpack.config.my.js'
}

3.webpack.config.js文件配置

// webpack是node写出来的node的写法
let path = require('path') // 解析出node的核心模块，内置模块
module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000, 
    progress: true, // 打包记录条
    contentBase: './build' // 以该文件为静态服务，可以找到该文件夹
  },
  mode: 'production', // 模式：默认两种，生产环境production以及开发环境development
  entry: './src/index.js', // 入口文件
  output: {
    // 8表示只显示8位
    filename: 'bundle.[hash: 8].js', // 打包后的文件名,加入hash戳可以使得每次生成的文件都不一致，每次对文件进行修改，都可以产生一个新的文件
    // __dirname表示以当前目录下产生一个dist路径
    path: path.resolve(__dirname,'dist') // 打包后的bundle.js的路径，且必须是绝对路径,path.resolve将相对路径解析成绝对路径
  },
  plugins: [ // 数组放着所有的webpack插件
    new HtmlWebpackPlugin({
      template: './src/index.html', // 希望以该文件为模板
      filename: 'index.html', // 打包后也是index.html
      minify: { // 代码压缩
        removeAttributeQuotes: true, // 删除文件中的双引号，比如index.html文件
        collapseWhitespace: true, // 折叠空行
        
      },
      hash: true, // 针对缓存问题，加一个hash戳
    })
  ]
}

三、webpack高级配置

let path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash: 8].js',
    path: path.resolve(__dirname,'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: { // 代码压缩
        removeAttributeQuotes: true,
        collapseWhitespace: true,
        
      },
      hash: true,
    })
  ],
  module: { // 模块
    rules: [ // 规则
      // style-loader是将css插入到head标签中
      // loader的顺序，默认从右向左执行，从下到上执行
      { 
        // 可以处理less文件
        test: /\.css$/, 
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'
            }
          },
          'css-loader'
        ] 
      },  // css-loader,解析@import这种语法
      { 
        // 可以处理less文件/sass/stylus
        test: /\.less$/, 
        use: [
          {
            loader: 'style-loader',
            options: {
              insertAt: 'top'
            }
          },
          'css-loader',
          'less-loader' // 把less-css
        ] 
      }  // css-loader,解析@import这种语法
    ]
  }
}

四、webpack优化策略

五、AST抽象语法树

六、掌握webpack流程，手写webpack

七、手写webpack中常见的loader

八、手写webpack中常见的plugin