webpack2学习日志

Posted 2020-10-04

webpack说容易也容易，说难也难，主要还是看个人，想学到什么样的程度，很多公司可能要求仅仅是会用就行，但是也有一些公司要求比较高，要懂一些底层的原理，所以还是要花一些时间的，看个人需求。这篇仅仅是做了一些总结，都是来自官网，便于复习。

 

一，先理解webpack的概念：

官网上：webpack 是一个现代 javascript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。

这里补充一下，webpack和gulp的差异：

gulp是一种前端自动化构建工具，task runner，它的核心功能是：

1，task的定义和组织

2，基于文件的stream构建

3，插件体系

webpack是module bundler，模块打包器，核心功能是：

1，按照模块的依赖构建目标文件

2，loader 体系支持不同的模块

3，插件体系提供更多额外的功能

原作者链接：https://www.zhihu.com/question/45536395?sort=created，这篇写得很好，总结了很多

关于gulp的使用，请见gulp的学习日志；

 

二，核心概念（entry，output，loader，plugins）

1，entry和context

context的作用是webpack会先从context配置的路径下检索entry文件；

如：

const config = {

　　context: path.resolve(‘./src‘),　　　　　　//path.resolve([from...],to)，将to参数解析为绝对路径，path是node模块

　　entry: ‘index.js‘　　

}

index.js文件放在src目录下；

webpack会创建一个由应用程序所有依赖构成的关系图（dependency graph），这个图的起点就是entry point，入口文件，从哪里开始，可以为单个入口，也可以为多个入口，语法可以是字符串，可以是对象，也可以是数组，对象的可扩展性较高

单个入口：

const config = {

　　entry: "./index.js‘　　//字符串语法

};

module.exports = config;

等同于

const config = {

　　entry: {

　　　　main: "./index.js"　　//对象语法

　　}

};

module.exports = config;

也可以写多页面

const config = {
  entry: {
    pageOne: ‘./src/pageOne/index.js‘,
    pageTwo: ‘./src/pageTwo/index.js‘,
    pageThree: ‘./src/pageThree/index.js‘
 }
};
每一个key会是chunk的名称

2，output
入口起点可以多个，但是输出配置只有一个
两个必须的属性：
filename：输出文件名
path：输出目录，必须是绝对路径，否则会报错。
入口起点单个，最简单的例子：

const config = {
  output: {
    filename: ‘bundle.js‘,
    path: ‘/home/proj/public/assets‘
  }
};
如果多个入口起点
const config = {
　output: {
　　filename: ‘[name].js‘,
　　path: __dirname + ‘/dist‘　　//__dirname表示当前目录
　}
}
属性publicPath表示指定资源文件引用的目录，并不表示path前面可以省略publicpath里面定义的路径，比如
output: {
　　publicPath: ‘/dist‘,
　　path: path.resolve(‘./dist/js‘),
　　filename: ‘bundle.js‘
},
output.chunkFilename是做什么的？ 　　（深恶痛绝，参加面试的时候问到了这个问题，一脸懵逼，听过但不懂干嘛的-。-）
此选项决定了非入口chunk文件的名称，可取值在下面的filename里
(关于output.filename：
1，对于单个入口起点，filename就是一个静态string，
filename: "bundle.js"
2，如果不是单个入口，为了区分不同的bundle，需要用下面中的一种替换方式来赋予每一个bundle唯一名称
filename: ‘[name].bundle.js‘
使用内部chunk id
filename: ‘[id].bundle.js‘
使用每次构建过程中，唯一的hash生成
filename: ‘[name].[hash].bundle.js‘
使用基于每个chunk内容的hash
filename: ‘[chunkhash].bundle.js‘)

output.hotUpdateChunkFilename:自定义热更新chunk的文件名，可选值见上面filename，没必要修改这个值，默认就行
output还有一些其他属性，这里不一一介绍了，详见官网



3，loader，
对模块的源代码进行转换，可以在import或加载的时候（打包前）预处理文件，有点类似于task，在webpack2.0版本中，写法如下：
module: {
　　rules: [
　　　　{
　　　　　　test: /\\.txt$/,　　　　//test用来识别出应该被对应的loader进行转换的文件，用正则写法
　　　　　　use: ‘raw-loader‘　　　//use用来转换文件，并且使其能够被添加到dependency graph中，并最终添加到bundle中，注意webpack2里面loader必须写全，webpack1中loader可以只写‘-’前面的，但是2里面会报错
　　　　}
　　]
}
我们也可以给use配置多个loader：
module: {
　　rules: [
　　　　{
　　　　　　test: /\\.css$/,
　　　　　　use: [
　　　　　　　　{loader: ‘style-loader‘},
　　　　　　　　{
　　　　　　　　　loader: ‘css-loader‘,
　　　　　　　　　options: {
　　　　　　　　　　　modules: true
　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　]
}
同样我们可以通过CLI使用loader，直接敲命令：
webpack --module-bind jade-loader --module-bind ‘css=style-loader!css-loader‘
这会对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader

每个rule分为三部分：条件，结果和嵌套规则：
   1，条件：有两种输入值，resource：请求文件的绝对路径，相关属性是test，include，exclude，resource
　　　　　　　　　　　　   issuer：被请求资源的模块文件的绝对路径，相关属性是issuer
　　　这两种输入值解释一下，从app.js里面导入"./style.css"，那么resource就是/path/to/style.css，而issure就是/path/to/app.js
　 2，结果：有两种输入值，应用的loader：应用在resource上的loader数组，
　　　　　　　　　　　　　 Parser选项：用于为模块创建解析器的选项对象。
　　　　　　影响loader的属性：loader，options，use，query，loaders
　 3，嵌套规则：属性rules，oneOf制定嵌套规则
　rule的其他属性，详见官方文档

4，plugin
插件的目的是解决loader无法实现的事
用法，向plugins属性传入new实例,下面我会列举一些常用的plugin

const htmlWebpackPlugin = require(‘html-webpack-plugin‘);
const cleanWebpackPlugin = require(‘clean-webpack-plugin‘);
const webpack = require(‘webpack‘)

plugins: [
    new HtmlWebpackPlugin ({
　　　　title: ‘Hot Module Replacement‘　　　　　　　　　　　//关于HtmlWebpackPlugin的参数配置，参考这个作者链接http://www.cnblogs.com/haogj/p/5160821.html
　　}),
　　new webpack.HotModuleReplacementPlugin(),　　　　　　　　//模块热替换,
　　new cleanWebpackPlugin([‘dist‘])　　　　　　　　　　　　　//清除dist文件夹

]

5，其他配置：

devtool：开发环境下推荐用“cheap-module-eval-source-map”，生产环境下推荐用“source-map”，其他的选项见官方文档

webpack-dev-server: 这个不多说，就是本地起一个服务然后监听文件变化

webpack -p 等同于 webpack --optimize --define process.env.NODE_ENV="‘production‘"，会执行如下步骤：
使用UglifyJsPlugin进行JS文件压缩，运行LoaderOptionsPlugin(主要是用来将webpack1迁移到webpack2上)，设置NodeJS环境变量，触发某些package包，以不同的方式进行编译

devServer：配置项见官方文档，比较多，常用的几个：
devServer: {
　　contentBase: path.resolve(__dirname, ‘dist‘),
　　compress: true,　　　　　　　　//一切服务都启用gzip压缩
　　port: 9000,
　　color: true,
　　hot: true,
　　hotOnly: true,
　　open: true
}

6，Manifest
概念：当编译器开始执行、解析和映射应用程序时，它会保留所有模块的详细要点，这个数据集合就是Manifest
runtime：在模块交互时，连接模块所需的加载和解析逻辑，包括浏览器中已经加载的模块的连接，以及懒加载模块的执行逻辑。
当完成打包并发送给浏览器时，会在运行时通过Manifest来解析和加载模块，此时import或require已经转换成了__webpack_require__方法，此方法指向模块标识符，通过使用Manifest中的数据，runtime将能够查询模块标识符，检索出背后对应的模块。

7，target
webpack提供了多种构建目标target，表明了用于哪种环境下的javascript
node：编译为类Node.js环境可用
web：编译为类浏览器环境下可用（默认）
。。。。。。