一.你需要准备什么?
- 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的安装和其他版本有所不同,命令有所不同,大家在学习之前,需要看清相关环境;
