一、webpack简介
1. webpack是什么：
webpack是一个打包工具：本质上webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
2. webpack的作用：
(1)打包：把多个文件打包成一个js文件，以减少服务器压力和贷款。
(2)转化：使用loader转化lees、sass、ts等。
(3)优化：SPA项目越来越盛行，前端项目复杂度高，webpack可以对项目进行优化。
3. webpack构成：
(1)入口：entry
(2)出口：output
(3)loader：转化器
(4)plugins：插件
(5)devServer：开发服务器
(6)mode
4. webpack的两种环境
(1)开发环境(development)：就是你平常写代码的环境。
(2)生产环境(production)：项目开发完毕，部署上线。
二、webpack安装和基础项目配置
1.创建项目文件夹（webpack-demo），并建立基础的目录和结构
pwebpack
dist //静态文件存放的文件夹(distribution)
index.html //最终要浏览的html文件
src //js代码等存放的文件夹(source)
index.js //js代码主文件
webpack.config.js //webpack配置文件
- 编写index.html和index.js文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello webpack</title>
</head>
<body>
<script src="./bundle.js"></script> //bundle.js文件我们后面会通过打包创建
</body>
</html>
//index.js
document.write('hello webpack i am so happy!);
- 编写webpack.config.js文件
//webpack.config.js
const path = require('path'); //引入path，以处理路径问题
console.log(path.resolve(__dirname,'src/index.js')); //打印路径，以排查错误（非必要代码）
module.exports = {
//入口配置
entry: {
main: path.resolve(__dirname,'src/index.js'),
},
//出口配置
output: {
path: path.resolve(__dirname,'dist'), //此处若非绝对路径，可能报错
filename: 'bundle.js',
},
//以下可按需配置
//module rules loaders
module: {},
//插件
plugins: [],
//开发服务器
devServer: {},
};
- 命令行进入项目并全局安装webpack（必须已安装node）
...\webpack>cnpm install webpack-cli -g //参数-g为全局安装`
- 项目初始化(即自动建立项目依赖配置文件：package.json)
...\webpack>cnpm init -y //参数-y可以跳过初始化中的配置询问。
- 命令行安装项目本地依赖webpack、webpack-lic（必须已安装node）
...\webpack>cnpm i webpack webpack-cli -D //参数-D为--save-dev简写`
*注意：此命令会自动生成node_modules文件夹存放项目本地依赖，同时原有package.json文件中会新增"devDependencies"对象用于记录本地安装的依赖， 当项目本地依赖被删除时，运行cnpm install -D即可根据package.json中的记录自动安装项目本地依赖，这非常重要！
- 打包文件，生成出口文件bundle.js
...\webpack>webpack --mode development //--mode devlopment设置为开发模式，否则会有设置模式的警告
- 在浏览器中打开index.html即可浏览，至此简单的webpack打包就成功了。
三、其它事项
- 遇到的问题：
！！！注意如果修改了package.json打包可能会报错：
ERROR in Entry module not found: SyntaxError: E:\webpack-demo\package.json (directory description file)
将package.json删除，重新初始化文件，这时再重新打包则成功了。 - 通过配置package.json中的 "scripts"，可以新增命令。
在package.json文件的"scripts"中新增build：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js --mode development"
},
保存后，直接运行...\webpack>cnpm run build即可打包。
！！！注意如果新增build时缺少--config webpack.config.js部分则可能报错。
- webpack.config.js为webpack配置文件的默认名称，不建议修改，但是可以修改。
如果将webpack配置文件名称修改为haha.config.js，则打包时需运行
...\webpack>webpack --config haha.config.js
网友评论