一、Webpack定义
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
webpack的重要功能包括:代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。
从图中我们可以看出,Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。
二、如何在项目中使用Webpack
1、 安装node.js,下载Node.js
官方地址:https://nodejs.org/en/ 或 https://nodejs.org/zh-cn/
2、创建package.json
在项目的根目录文件下,创建package.json文件,在终端中输入命令npm init -y即可在项目中自动生成
3、webpack和webpack-cli的安装
在终端中输入命令npm install webpack webpack-cli --save-dev即可在项目中自动下载安装。
4、新建webpack.config.js
手动在项目根目录下新建webpack.config.js文件,找到需要打包的文件,以及打包之后输出的路径以及文件的名称。
// CommonJS语法
const path = require('path')
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js',
},
output: {
filename: '\[name].js',
path: \_\_dirname + '/dist',
},
};
// 写入到硬盘:./dist/app.js, ./dist/admin.js
5、package.json文件中修改scripts构建类型
在package.json文件修改构建类型为:
"scripts": {
"build":"webpack"
}
6、完成打包
在终端中输入打包命令,即可在打包完成,可以在打包后输出路径查看自己打包文件,后面直接引用打包后路径的文件即可。
npm run build