一.基本的概念
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
-
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。module.exports = { entry: './path/to/my/entry/file.js' };
-
输出(output)
output.filename属性:告诉 webpack bundle 的名称
output.path 属性:想要 bundle 生成(emit)到哪里
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' } };
-
loader
test 属性:用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性:表示进行转换时,应该使用哪个 loader。
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
-
插件(plugins)
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config;
-
模式
提供 mode 配置选项,告知 webpack 使用相应模式的内置优化module.exports = { mode: 'production' };
二.练习
三.初始化一个react项目
步骤如下:
1.运行npm init -y
快速初始化项目。结果如下:
2.在项目根目录下创建src源代码目录和dist产品目录。在src目录下创建index.html。
结果如下:
3.运行cnpm i webpack webpack-cli -D
安装webpack和webpack-cli插件。文件结果如下:
4.由于webpack 4.x默认约定了打包的入口是src下的index.js,打包的输出文件时dist目录下的main.js。因此在webpack.config.js中可以不设置entry和output,遵循默认路径。当然也可以根据自己的文件设置。
5.在根目录下创建webpack.config文件。设置内容如下:
module.exports={
mode:'production'
}
6.运行npx webpack
命令,就在终端看到无错误提示时则为成功配置了webpack。
7.实现浏览器可以实时更新的效果。
(1)运行npm i webpack-dev-server -D
命令安装webpack-dev-server插件。
(2)在package.json中设置如下内容:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},
8.运行npm run dev
命令。倘若成功则证明第七步无误可以正常进行打包。
9.由于webpack自身值支持js文件,因此需要一些插件和loader对其它类型的文件进行处理。在这里介绍的是html文件的处理。
(1)在src目录下创建一个index.html文件。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>
<div>777777</div>
</body>
<script src="../dist/main.js"></script>
</html>
(2)index.js中的设置如下:
console.log('mememememe')
(3)运行cnpm i html-webpack-plugin
安装htnl-webpack-plugin插件。这个插件可以导入在内存中自动生成的html文件。
(4)在webpack.config.js中写如下内容:
const path=require('path');
const htmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
module.exports={
mode:'production',
plugins:[
htmlPlugin
]
}
(5)运行npm run dev
。浏览器结果如下则证明插件使用成功:
查看元素发现:
那么代表着<script src="../dist/main.js"></script>
这行代码已经没有作用了,删去即可。src下的目录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>
<div>777777</div>
</body>
</html>
10.运行cnpm i react react-dom -S
安装react和react-dom插件。可以在项目中使用react。
11.在react项目中启用JSX语法。
(1)运行cnpm i babel-loader @babel/core @babel/plugin-transform-runtime -D
(2)运行cnpm i @babel/preset-env @babel/preset-react -D
(3)在根目录下创建.babelrc配置文件。
内容如下:
{
"presets":["@babel/preset-react","@babel/preset-env"],
"plugins":["@babel/plugin-transform-runtime"]
}
文件目录如下:
(4)在webpack.config.js中添加babel-loader配置项
module.exports={
mode:'production',
plugins:[
htmlPlugin
],
module:{
rules:[
{test:/\.js|.jsx$/,use:'babel-loader',exclude:/node_modules/}
]
}
}
12.关闭 webpack 的性能提示。
在webpack.config.js中添加如下信息:
performance: {
hints:false
}
13.一个简单的webpack打包react项目就整理完毕。关于css等等样式文件的webpack打包这里不再赘述。