一.前言
当我们使用vue-cli3创建项目时,会自动生成相应的webpack配置,不过明白webpack的原理和基本设置方法对我们局部修改某些webpack配置还是很有必要的;
二.为什么需要构建工具?
- 转换
ES6
语法; - 转换
JSX
; CSS
前缀补全/预处理器;- 压缩混淆;
- 图片压缩;
三.Webpack五个核心概念
1.入口(Entry)
入口(Entry
)指示webpack
以哪个文件为入口起点开始打包,分析构建内部依赖图;
2.出口(Output)
输出(Output
)指示Webpack
打包后的资源bundles
输出到哪里去,以及如何命名;
3.Loader
Loader
让Webpack
能够去处理那些非JavaScript
文件(Webpack
自身只理解JavaScript
)
4.插件(Plugins)
插件(Plugins
)可以用于执行范围更广的任务,插件的作用范围包括,从打包优化和压缩,一直到重新定义环境中的变量等;
5.模式(Mode)
通过设置 mode
参数为 development
或 production
之中的一个,来启用相应模式下 webpack
内置的优化;
module.exports = {
mode: 'production'
};
development
模式:代码本地调试和运行的环境;production
模式:代码优化上线运行的环境;
四.源码仓库
webpack
系列中使用到的演示实例源码已上传至该仓库:
示例:
创建下图所示的文件目录:
其中src
表示源文件目录,存储着webpack
的入口起点文件,比如index.js
;build
用于webpack
打包处理之后输出的目录,其余文件可通过执行:
可通过下列指令创建一个演示实例:
npm init//生成package.json
webpack_test //文件夹名字
一路回车取默认值生成:
随后执行以下命令全局安装webpack
,其中的-g
参数表示全局安装,即使已经安装过了,也没关系。该指令会覆盖原来的安装并进行版本更新。
五.npm i 和 npm install 的区别
i
为install
的缩写;
实际使用的区别点主要如下(windows下):
-
用
npm i
安装的模块无法用npm uninstall
删除,用npm uninstall i
才卸载掉 -
npm i
会帮助检测与当前node
版本最匹配的npm
包版本号,并匹配出来相互依赖的npm
包应该提升的版本号 -
部分
npm
包在当前node
版本下无法使用,必须使用建议版本 -
安装报错时
intall
肯定会出现npm-debug.log
文件,npm i
不一定
npm i webpack webpack-cli -g
然后在本地安装,参数-D
为--save-dev
的缩写,表示它会将webpack
添加到package.json
中的开发依赖中:
npm i webpack webpack-cli -D
webpack
中下载的所有东西都属于开发依赖,不属于生产依赖,所以都使用-D
。
index.js
文件内容:
/*
index.js:webpack入口起点文件
1.运行指令:
开发环境指令:webpack ./src/index.js -o ./build/built.js --mode=development
翻译:webpack会以./src/index.js为入口环境开始打包,打包后输出 ./build/built.js;整体打包环境是开发环境;代码不会被压缩,可以看清楚逻辑;
生产环境指令:webpack ./src/index.js -o ./build/built.js --mode=production
翻译:webpack会以./src/index.js为入口环境开始打包,打包后输出 ./build/built.js;整体打包环境是生产环境;代码会被压缩,无法看清代码逻辑;
*/
function add(x, y){
return x + y
}
console.log(add(1, 2));
先进入02-webpack
初体验目录,然后打包文件
开发环境指令:
输入下列开发环境指令打包文件:
webpack ./src/index.js -o ./build/built.js --mode=development
输出结果:
- 其中的
Hash
值代表打包的结果,每次打包都会生成一个唯一的哈希值,唯一地ID
; - 其余的有版本,打包时间,资源
Asset
,打包后的文件built.js
的大小等;
此时build
目录下会多出一个built.js
文件
生产环境指令
输入下列生产环境指令打包文件:
webpack ./src/index.js -o ./build/built.js --mode=production
运行结果:
查看生成的build
目录下的built.js
文件,发现代码进行了压缩:
这个代码是可执行的:
每次src
文件夹中的入口文件index.js
引入了新依赖之后,都要重新进行打包,才能看到最新的结果;
也就是说只要指定了入口文件index.js
,就可以在index.js
中通过import
引入很多依赖文件,这样
webpack
在打包入口文件index.js
的时候就会根据其中引入关系,一起打包index.js
的依赖文件;
那么引入其他文件呢?
比如在index.js
中引入css
文件的时候:
会出现打包错误,打包出来的built.js
中的该部分会丢出一个错误:
得出结论:
webpack
能处理js/json
资源,不能处理css/img
等资源;- 生产环境和开发环境将
ES6
模块化编译成浏览器能识别的模块化; - 生产环境(
production
)比开发环境(development
)多了一个压缩js
代码;
六.打包样式资源
虽然webpack
不能直接打包css
文件,但是可以借助于各种各样的Loader
将webpack
不能识别的文件转换成它能识别的格式;
需要在根目录的package.json.js
文件中进行配置:
整体配置为:
const { resolve } = require('path')
module.exports= {
entry: './src/index.js',
//输出:这是一个对象,里面有两个东西。filename表示输出的文件名,path表示输出的路径,写路径的时候通常会写一个绝对路径,避免出错。绝对路径会引入一个nodejs的path模块
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules:[
{
//详细loader配置
//匹配哪些文件
test: /\.css$/,
//处理这些文件
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins: [
//详细plugins配置
],
mode: 'development',
//mode: 'production'
}
首先, webpack.json.js
为webpack
的配置文件。作用为:指示webpack
干哪些活(当运行webpack
指令时,要加载哪些配置);
所有构建工具都是基于node.js
平台运行的,模块化默认采用commonjs
。可以看到commonjs
会导出一个对象,在该对象中写webpack
的配置:
1.入口起点
entry: './src/index.js'
表示打包的入口文件为src
目录下的index.js
文件;
2.输出
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
}
这是一个对象,其中:
-
filename
表示输出的文件名; -
path
表示输出的路径; -
写路径的时候为了避免出错,通常会写一个绝对路径。需要引入一个
nodejs
的模块path
模块:const { resolve } = require('path')
其中的
resolve
是用来拼接绝对路径的方法,格式为:path: resolve(__dirname, 'build')
传入两个参数:
__dirname
和当前的build
目录;其中__dirname
是nodejs
的变量,它代表当前文件(指webpack.config.js
)的目录的绝对路径:
- 该绝对路径就是
03-
打包样式资源,也就是说__dirname
的值就是03-打包样式资源
,拼接上build
,再加上第一个参数filename
指明的built.js
一起表示,打包后输出到build
目录下的built.js
文件中;
3.Loader配置
module: {
rules: {
//详细loader配置
}
}
4.插件(plugins
)
plugins: [
//详细plugins配置
],
5.模式
mode: 'development',
//mode: 'production'
开发模式development
和生产模式production
两种模式选一种,不能同时写;
6.打包样式资源
可以使用css-loader
来翻译css
文件:
module: {
rules: [
{
//详细loader配置
//使用正则表示式指定匹配哪些文件
test: /\.css$/,//该正则表达式表明,匹配以css结尾的文件,\为转义符
//通过test的正则表达式匹配了文件后,这里指定使用哪些loader进行处理
use: [
//需要使用两个loader
//作用:创建style标签,将js中的样式资源插入进去,添加到head中生效
'style-loader',
//将css文件转换成一个commonjs模块并加载到js中,里面内容是样式字符串
'css-loader'
]
}
]
}
注意:rules
属性是一个数组,里面的每一个元素都为对象,每个对象匹配并处理一类文件。并且对象中的use
属性也是一个数组,其中loader
的执行顺序为:从右到左,从下到上依次执行。为了不用每次都安装同样的依赖文件包,可以在根目录执行下列指令安装这些包,因为子目录中找不到包会依次往根目录找:
npm init //生成package.json
npm i webpack webpack-cli -D //下载webpack包,-D是--save-dev的缩写,表示是开发时依赖
npm i css-loader style-loader -D //下载两个loader,都是开发时依赖
进入03-打包样式资源
目录,执行webpack
进行打包:
打开打包生成的built.js
,可以看到index.css
被成功打包了:
在build
目录下新建index.html
引入生成的打包文件built.js
: