Webpack的打包和构建

Posted by 陈陈君 on 2021-02-06
Estimated Reading Time 2 Minutes
Words 723 In Total
Viewed Times

Webpack


webpack,是一种基于 Node.js 用来打包,管理前端项目资源的工具。使用webpack打包的项目能够让资源更集中更安全。它能够将多个资源文件包括 CSS/JavaScript 和图片等资源集成起来,并且是完全静态的文件。能够有效减少服务器的请求。

多个 CSS 可以直接打包成 1个CSS,多个 JS 可以打包成1个 JS,并且是代码压缩的。在 JavaScript 源文件中被通过算法来混淆代码,提高代码安全性。

webpack支持 原生H5项目打包,像现在比较流行的前端框架: Vue.js, React.js 也都可以使用该工具来进行项目构建。支持ES5语法但(暂时不支持IE8以下浏览器)

环境搭建


webpack 的安装非常简单,在已经安装 Node.jsnpm 包管理器的情况下使用命令,全局安装基础 webpack 环境以及 webpack 脚手架。

1
npm install -g webpack webpack-cli

安装后可以使用命令查看版本号,检查是否成功安装。

1
webpack -v

初始化项目(演示demo)


1.在一个目录下初始化 Node.js 工程

1
npm init -y

2.创建 src 文件夹,假设里面将是 js 存放的位置。
分别创建了 file_1.js 以及 file_2.js

file_1.js

1
2
import f2 from './src/file_2.js';
f2.HelloWorld();

file_2.js

1
2
3
export default function HelloWorld(){
console.log("Hi webpack");
}

输入(entry) 和 输出(output)


3.在工程目录下建立 webpack.config.js 首先需要引入Node.js的内置模块 path。在 Module.exports 中 entry 属性为项目中的资源文件, output 属性则是打包输出的文件。

1
2
3
4
5
6
7
8
9
10
11
const path = require('path');
module.exports = {
entry: [
'./src/file_1.js',
'./src/file_2.js'
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};

其中,path 对象resolve 方法:指定当前工程目录下创建 dist 文件夹 , 经过打包的文件会存放在那里。

打包CSS

如果在打包 JS 的同时打包 CSS,可以安装loader转换器并加入这一段配置代码。

1
npm install --save-dev style-loader css-loader
1
2
3
4
5
6
module: {
rules:[{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
}

构建并使用它们


一切就绪了之后,可在终端使用 webpack 命令来打包。

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
...
</head>
<body>
...
<script src="dist/bundle.js"></script>
</body>
</html>

经过了webpack打包之后可以在 HTML 页面中这样引用它们。

热更新调试


webpack 支持热更新调试,如果你不想多次重复执行 webpack 打包生成,可以试一试热更新调试,保存即修改。

1
webpack -w

2

Webpack 和 Vue.js


对于vue项目,在安装了相关环境下可使用命令:

1
vue init webpack [项目名]

来快速构建支持 webpack 打包的 vue 项目。

END


更多关于 webpack 的内容:https://webpack.docschina.org/