认识Webpack及体验

如果想要看webpack源码分析的部分，看这里 webpack源码

快速上手

webpack初体验

1. 准备文件 快速上手-文件模板
2. 初始化package.json，npm init -y
3. 安装webpack以及其脚手架npm i webpack webpack-cli --save-dev
4. 修改package.json文件

"scripts": {
    "build":"webpack"
}

5. 执行命令看是否安装成功npm run build --version
6. 成功之后执行npm run build

npm run webpack

# > fast@1.0.0 webpack E:\professer\lagou\webpack\fast
# > webpack

# [webpack-cli] Compilation finished
# asset main.js 198 bytes [emitted] [minimized] (name: main)
# orphan modules 213 bytes [orphan] 1 module
# ./src/index.js + 1 modules 321 bytes [built] [code generated]
# webpack 5.1.3 compiled successfully in 322 ms

可以看到多了一个dist文件夹，打包工具将两个js文件打包成了一个main.js文件并且编译完成

7. 将index.html的引用修改<script src="dist/main.js"></script>，刷新浏览器运行正确

配置文件初体验

webpack4以后的版本支持零配置直接启动打包，按照约定将src/index.js作为打包入口，默认输出到dist/main.js，如果要自定义入口文件那么需要进行配置

webpack.config.js是运行在node环境下面的js文件，我们需要按照CommonJS的方式编写代码

// output中需要
const path = require('path')
// 这个文件默认导出一个对象，我们可以通过对象的属性完成配置选项
module.exports = {
  // 入口路径，如果是相对路径，./不可以省略
  entry: './src/main.js',
  // 输出文件路径
  output: {
    // 文件名称
    filename: 'bundle.js',
    // 直接写output报错，必须得是绝对路径，所以这里需要用path进行转化
    path: path.join(__dirname, 'output')
  }
}

这个时候可以看到，在output目录下出来一个bundle.js的文件

还可以进行多个文件的输出

module.exports = [
	{
		entry: './src/main.js',
		output: {
			filename: 'a.js'
		}
	},
	{
		entry: './src/main.js',
		output:{
			filename: 'b.js'
		}
	}
]

这个时候打包就会有a.js和b.js同时生成

webpack工作模式

webpack4新增，大大降低了开发的复杂程度，可以理解为根据几种不同的预设配置。默认是production模式

• production —— 代码自动启动优化，自动压缩
• development —— 代码自动启动优化速度，不会压缩，在代码中加一些调试的辅助
• none —— 最原始状态的打包，不做额外处理

可以在运行时直接写参数

• webpack / webpack --mode production
• webpack --mode development
• webpack --mode none

如果是在package.json里面写，

"scripts": {
    "build":"webpack --mode production",
    "dev": "webpack --mode development",
    "none": "webpack --mode none"
}

之后命令行中使用npm run buildornpm run devornpm run none即可。

可以在配置文件中设置

module.exports = {
  mode:'development' // production / none
}

webpack打包结果运行原理

webpack打包过后的代码并不会特别的复杂，只是帮我们把所有的模块放在了一个文件当中，本身是一个自调用函数，传的参数module是一个数组，它还要提供一些基础代码让我们的模块与模块之间相互依赖关系可以保持原来的状态，也保持了模块自身的私有作用域。