Webpack
什么是webpack?
- 官方网站 www.webpackjs.com
本质上,webpack
是一个现代JavaScript
应用程序的静态模块打包器(module bundler
)。当 webpack
处理应用程序时,它会递归地构建一个依赖关系图(dependency graph
),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle
。
安装
webpack
是一个使用 Node.js
实现的一个模块化代码打包工具。所以,我们需要先安装 webpack,安装之前需要搭建好 Node.js
环境
npm install -D webpack webpack-cli
注:不推荐全局安装,并且某些插件与高版本webpack不兼容,可以手改package.json文件中的版本后重新安装
webpack-cli
: 提供 webpack 命令、工具,类似 create-react-app
webpack
: webpack 代码,类似 react
使用
//启动webpack打包
./node_moudle/.bin/webpack
//查看版本
./node_moudle/.bin/webpack -v
上述方式比较繁琐,可以在package.json文件中的script
下新增以下内容:
// package.json
{
...,
"scripts": {
"start": "webpack" // scripts 中可以自动在 ./node_modules/.bin/ 目录下查找,因此不需要补全路径
}
}
在package.json
中写好之后可以在终端中直接使用npm run start
启动webpack。
此外还可以在终端中使用npx指令:npx webpack
。该指令会自动在./node_moudle/.bin/
目录下查找资源。
webpack配置
entry
入口起点(entry point)指示webpack
应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack
会找出有哪些模块和库是入口起点(直接和间接)依赖的。
每个依赖项随即被处理,最后输出到称之为bundles
的文件中,我们将在下一章节详细讨论这个过程。
可以通过在webpack
配置中配置entry
属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src
。
//webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
//这样的话,webpack就会以该file.js文件作为入口开始打包。
output
output 属性告诉 webpack 在哪里输出它所创建的 bundles
,以及如何命名这些文件,默认值为 ./dist
。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output
字段,来配置这些处理过程:
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
//在根目录下创建dist命名的文件夹,并在该文件夹下生成打包后的文件my-first-webpack.bundle.js
loader
loader用于对模块的源代码进行转换。loader可以在使用import导入或者加载模块之前,先对模块进行预处理。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import
CSS文件。
loader具有如下特性:
- 支持链式操作
- 支持同步、异步
- 可接收查询参数,用于对loader传递配置
- 可以使用
options
对象来对loader进行配置
例如,webpack其实是可以加载各类文件如css、txt文件等,但是默认是以js文件类型导入。使用loader就可以告诉webpack正确的导入css等类型的文件,或者将JS文件转换为TS文件。首先需要安装好对应的loader组件:
npm install --save-dev css-loader
npm install --save-dev ts-loader
安装好之后,在webpack.config.js
内配置好loader的相关规则配置。
//webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
实例
通过entry、output、loader的配置使用,已经可以实现webpack打包的基本功能。
//资源组织结构如下
-- /dist //项目打包后存放目录
-- /node_modules //第三方模块
-- /src //工作目录
---- css/
---- images/
---- js/
---- index.js
-- /template
---- index.html
-- webpack.config.js
-- package.json
入口文件index.js文件内容
import fn1 from './js/fn1.js'
import fn2 from './js/fn2.js'
import img from './images/logo.png'
let bottunElement = docunment.qs('#btn1')
console.log('fn1',fn1);
let image = new Image();
image.src = img;
document.body.appendChild(image);
bottunElement.onclick = function(){
fn2();
}
fn1.js文件内容
export default 100 ;
fn2.js文件内容
console.log('resolved');
模板文件index.html文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><document></title>
</head>
<body>
<h1>webpack</h1>
<button id="btn1">
click
</button>
</body>
</html>
webpack.config.js配置内容
const path = require('path');
module.exports = {
entry: {
'index': './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js'
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images",
// 打包后文件的 url
publicPath: '../dist/images',
// 小于 100 字节转成 base64 格式
limit: 100
}
},
},
{
test: /\.css$/,
use: [
// "style-loader",
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
// 启用/禁用 url() 处理
url: true,
// 启用/禁用 @import 处理
import: true,
// 启用/禁用 Sourcemap
sourceMap: false
}
}]
}
]
}
}