1.什么是Webpack?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用
2.使用Webpack的前期准备
2.1 创建package.json文件
创建一个项目文件夹（此处命名为webpack sample project）在文件夹中使用npm init命令自动创建package.json文件
npm init
2.2 package.json文件已经就绪，我们在本项目中安装Webpack作为依赖包
// 安装方式一：局部安装(安装到你的项目目录)
npm install --save-dev webpack
// 安装方式二：全局安装
npm install -g webpack
2.3 在文件夹下创建app文件夹， public文件夹。
- app文件夹：存放原始数据和将要写的JavaScript模块
- public文件夹：存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个index.html文件）
再创建三个文件：
- index.html -- 放在public文件夹中;
- Greeter.js -- 放在app文件夹中;
- main.js -- 放在app文件夹中;
此时项目结构如下图：
在index.html文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js，之后我们还会详细讲述）
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
在Greeter.js中定义一个返回包含问候信息的html元素的函数,并依据CommonJS规范导出这个函数为一个模块
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
main.js文件中我们写入下述代码，用以把Greeter模块返回的节点插入页面。
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
3.开始使用Webpack(通过配置文件)
在当前文件夹的根目录下新建一个名为webpack.config.js的文件，我们在其中写入如下所示的简单配置代码，目前的配置主要涉及到的内容是入口文件路径和打包后文件的存放路径。
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
更快捷的执行打包任务:
在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下:
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
注：package.json中的script会按照一定顺序寻找命令对应的位置。故无论是全局还是局部安装的webpack，都无需再指明详细的路径了。
- 对应的脚本名是start:npm start
- 对应的脚本名不是start:npm run {script name}，如：npm run build
4.Webpack的强大功能
4.1 生成Source Maps（使得调试更容易）
Source Maps：方便在打包后的文件中快速找到出错的地方。
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
- source-map：在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
- cheap-module-source-map：在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
- eval-source-map:用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
- cheap-module-eval-source-map:这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；
由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
中小型项目：eval-source-map是一个很好的选项。再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
4.2 使用webpack构建本地服务器
作用：监听代码的修改，并自动刷新显示修改后的结果。
实现：
1.作为一个单独的组件，在webpack中进行配置前需要独立安装此组件
npm install --save-dev webpack-dev-server
2.在webpack.config.js中进行配置
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
在终端中输入npm run server即可在本地的8080端口查看结果。
扫一扫
843
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
