webpack初体验

webpack基础用法

核心概念之Entry

Entry用来指定webpack的打包入口。webpack是一个模块打包器，在webpack里面会把所有的资源(js、css、html、图片、字体)当成一个个模块，所有这些模块之前会存在依赖关系，因此webpack里面会从入口文件(entry指定)开始寻找依赖，依赖又存在其他依赖的文件，这样就形成一颗依赖图，对于非代码比如图片、字体依赖也会不断加入到依赖图里面。

Entry用法
单入口：entry是一个字符串（单页应用）

module.exports: {
  entry: './path/to/to/entry/file.js'
}

多入口：entry是一个对象（多页应用）

module.exports={
  entry: {
    app: './src/app.js',
    adminApp: './src/adminApp.js'
  }
}

---

核心概念之Output
Output用来告诉webpack如何将编译后的文件输出到磁盘，以及输出和的文件名称

output用法：多入口配置
不管是单入口还是多入口，output里面都是只有一个，那么output如何做到输出不同入口对应的打包文件，那就是使用占位符（[name]）确保文件名的唯一

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

---

核心概念之Loaders

webpack开箱即用只支持JS和JSON两种文件类型，通过Loaders去支持其他文件类型并且把他们转化成有效的模块，并且可以添加到依赖图中。

本身是一个函数，接受源文件作为参数，返回转换的结果。

常见的Loaders有哪些？

babel-loader	转换ES6、ES7等JS新特性语法
css-loader	支持css文件的加载和解析
less-loader	将less文件转换成css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等的打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

Loaders的用法
一个webpack配置里面会存在多个Loader，这些Loader需要存放在module的rules数组里面

const path = require('path')
module.exports = {
  output: {},
  module: {
    rules: [
      {test: /\.txt$/, use:'raw-loader'} // test指定匹配规则，use指定使用的loader名称
    ]
  }
}

---

核心概念之Plugins

插件用于bundle文件的优化，资源管理和环境变量的注入，任何loaders不能做的事情都可以用plugins完成。
Plugins作用于整个构建过程。
常见的plugins有哪些？

CommonsChunkPlugin	常用于多页面打包，将chunks相同的模块代码提取成公共js文件
CleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将CSS从bundle文件里提取成一个独立的CSS文件
CopyWebpackPlugin	将文件或文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundle
UglifyjsWebpackPlugin	压缩JS
ZipWebpackPlugin	将打包出的资源生成一个zip包

Plugins的用法

module.exports = {
  output: {filename:'bundle.js'},
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}) // 放到plugins数组里面
  ]
}

---

核心概念之Mode

Mode是webpack4提出的概念，Mode用于指定当前的构建环境： production、development还是none
设置mode可以使用webpack内置的函数，默认值为production。

Mode的内置函数功能

development	设置process.env.NODE_ENV的值为development，开启NamedChunksPlugin和NamedModulesPlugin
production	设置process.env.NODE_ENV的值为production，开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModeConcatenationPlugin，NoEmitOnErrorPlugin，OccurentOrderPlugin，SideEffectsFlagPlugin和TerserPlugin
nonne	不开启任何优化选项

---

解析ECMAScript 6和React JSX

资源解析：解析ES6
使用babel-loader

module.exports = {
  module: {
    rules: [
      {test: /\.js$/, use: 'babel-loader'}
    ]
  }
}

遇到js文件，则会用babel-loader进行解析，babel-loader依赖babel，因此需要在项目中使用babel的配置文件.babelrc
资源解析：增加ES6的babel preset配置

{
  "presets": [
    "@babel/preset-env" // 增加ES6的babel preset配置
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]
}

资源解析：解析React JSX
也是使用babel-loader，但是需要在.babelrc配置文件中新增对react的配置

{
  "preset": [
    "@babel/preset-env",
    "@babel/preset-react"  // 增加react的babel preset配置
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]`
}`

资源解析：解析CSS
css-loader用于加载.css文件，并且转换成commonjs对象
style-loader将样式通过<style>标签插入到head中

module.exports = {
  module: {
    rules: [
      {test: /\.css$/,use: ['style-loader','css-loader']} //注意loader的调用是链式调用， 执行顺序是从右到左，因此这里会先用css-loader解析css，再将解析好的css传给style-loader
    ]
  }
}

---

解析资源：解析Less和Sass
less-loader用于将less转换成css

module.exports = {
  module: {
    rules: [
      {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
    ]
  }
}

---

资源解析：解析图片
file-loader用于处理文件

module.exports={
  module: {
    rules: [
     {test: /\.(png|svg|jpg|gif)$/, use: 'file-loader'}
    ]
  }
}

---

webpack中的文件监听

文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。
Webpack开启监听模式，有两种方式：
1.启动webpack命令时，带上--watch参数
2.在配置webpack.config.js中设置watch:true

文件监听的原理分析
轮询判断文件的最后编辑时间是否变化
某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout

module.exports = {
  // 默认false
  watch: true,
  // 只有开启监听模式时，watchOptions才有意义
  watchOptions: {
    // 默认为空，不监听的文件或文件夹，支持正则匹配
    ignored: /node_modules/.
    // 监听到变化发生后会等300ms再去执行，默认300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不断轮询系统指定文件有没有变化实现的，默认每秒问1000次
    poll: 1000
  }
}

---

Webpack中的热更新及其原理分析