webpack深入学习

本文链接： https://blog.csdn.net/qq_29918313/article/details/102729179

一、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高级配置

四、webpack优化策略

五、AST抽象语法树

六、掌握webpack流程，手写webpack

七、手写webpack中常见的loader

扫描二维码关注公众号，回复： 7628576 查看本文章

八、手写webpack中常见的plugin

猜你喜欢