一.你需要准备什么?
- webpack v4.41.5
- Node 12.14.0 LTS
- 开发工具:webStorm
webpack 用于编译 JavaScript 模块。一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互。如果你还不熟悉 webpack,请阅读webpack4.x - 初始webpack,了解为什么你要使用 webpack,而不是社区中的其他工具。
二.基本安装
首先我们创建一个目录,
如果大家刚装完node发现npm命令在webStorm的Terminal窗口无法使用,可以尝试重启开发工具或者电脑;
初始化 npm
npm init -y
npm install --save-dev webpack
接着安装 webpack-cli(此工具用于在命令行中运行 webpack);
截止目前,我们就完成了webpack的本地安装,我们来看看我们的项目接口;
我们发现了3个
不是我们创建的目录/文件,其中package.json
是我们初始化npm是自动生成,另外两个使我们本地安装webpack时自动生成;
三.打包js文件
接下来,我们随着一个小案例,来学习如何使用webpack打包js文件;
为了实现上面的效果,我们借助jquery库来实现;
3.1 代码之风
首先我们修改下我们的相关代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不推荐直接在这里引用任何包和任何css文件,引用我们项目的js-->
<script src="main.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
</ul>
</body>
</html>
main.js
//这是main.js 是我们项目的JS入口文件
//1导入Jquery
//import *** from *** 是es6中导入模块的方式
import $ from 'jquery'
$(function () {
//偶
$("li:odd").css('backgroundColor', 'lightblue');
//奇
$("li:even").css('backgroundColor', 'red');
});
我们发现import $ from 'jquery'
报红,因为我们还没有引入jquery库;
安装jquery库
默认安装在项目路径的node_modules
下
然后我们需要设置开发工具支持es6语法,就会发现报红自动消失;
3.2 运行
运行我们的index.html
发现如上报错;
ES2015 中的 import
和 export
语句已经被标准化。虽然大多数浏览器还无法支持它们,但是 webpack 却能够提供开箱即用般的支持。
事实上,webpack 在幕后会将代码“转译”,以便旧版本浏览器可以执行。如果你检查 dist/bundle.js
,你可以看到 webpack 具体如何实现,这是独创精巧的设计!除了 import
和 export
,webpack 还能够很好地支持多种其他模块语法,更多信息请查看模块 API。
注意,webpack 不会更改代码中除 import
和 export
语句以外的部分。
3.3 再出发
关于上面的问题,webpack给我们提供了解决方案;
在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件;
创建webpack.config.js
文件
/**
* Created by Milogenius on 2020/1/5.
*/
const path = require('path')
let config = {
mode: 'none',
entry: {
main: path.join(__dirname, './src/main.js')
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, './dist')
}
}
module.exports = config
接下来打开 package.json 文件,来编写一条命令执行webpack的打包。在 script 中添加:
"build": "webpack --config webpack.config.js --progress --colors"
然后就可以在命令行执行:npm run build,执行完毕后,我们可以看到,在根目录下多了一个 dist 文件夹 并有一个 bundle.js文件,这就是webpack为我们打包出来的静态资源,而文件路径就是我们在 output 中设置的值。
最后,在index.html
引入bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不推荐直接在这里引用任何包和任何css文件-->
<script src="../dist/bundle.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
</ul>
</body>
</html>
我们用浏览器打开index.html
,发现显示正常;这样我们利用webpack提供的相关技术,解决上面语法不适用问题;
四.总结
webpack4.0的安装和其他版本有所不同,命令有所不同,大家在学习之前,需要看清相关环境;