昨晚看b站视频的时候就跟着一起配置webpack，由于教学视频中使用的是3.6.0版本，我用nmp下的是最新的@4.*版本，webpack的官方文档又看得我头疼，整了半小时也没搞明白。
好在今天一早起床神清气爽，妥协了绕过4.0，也算是成功配置好了webpack，记录下这个过程。
- 首先，在windows的cmd窗口下卸载掉之前装的webpack。
2. 接下来全局安装webpack3.*版本。
3. 完成上面两步其实已经解决大部分问题了，在项目目录下使用 webpack .\src\main.js .\dist\bundle.js就能在dist目录下自动生成一个bundle.js文件。为了之后使用方便，在项目根目录下补充一个名为webpack.config.js的配置文件。
const path = require('path')
module.exports={
entry:path.join(__dirname,'./src/main.js'),//入口
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
- 下面是一个隔行变色小案例的实现
index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- main中的代码，涉及到了ES6的新语法，浏览器不识别 -->
<!-- <script src="./main.js"></script> -->
<!-- 通过webpack这么一个前端构建工具，把main.js做了一下处理，生成了一个bundle.js的文件 -->
<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>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
</body>
</html>
main.js代码
//这里的main.js是我们项目的JS入口文件
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','lightblue')
$('li:even').css('backgroundColor',function(){
return 'lightgreen'
})
})
注意：改变代码之后，在根目录的命令行窗口Powershellwebpack回车一下即可
比如改变了色彩：
以上就是webpack@3.*版本的配置和案例实现过程。