webpack的初步使用（隔行变色案例）

序言：使用webpack之前，首先你得安装上webpack。
通过 隔行变色 这个案例结合使用webpack。

第一步：

在我们项目中先创建一下目录结构，如图：
这里文件命名最好使用英文的（因为需要使用npm做特殊处理）

我们要实现列表的隔行变色，比较好的就是使用jQuery去实现。
但是我们没有jQuery的包，我们就通过npm去下载一个。
我们现在的命令行所在的路径应该是我们的WebpackStudy这个根目录文件夹。

第二步

代码结构如下：

第三步

1、项目在下载依赖之前，要进行初始化（快捷键ctrl+ shift + ~），运行命令：npm init -y。
初始化后，我们就能看到一个package.json文件
2、然后下载我们的jQuery包。运行命令：npm i jquery
下载完成后，我们会发现项目中多了一个node_modules的文件夹，我们的jQuery包就在里面。

方法基本上是大同小异的，我们也可以利用这种方法，去下载bootstrap,animate.css等等。

这一次下载完成之后，如果说到后来我们不小心把node_modules文件夹删除，我们可以直接通过运行命令npm i,直接把我们以前下载过的包，都重新下载下来，版本还都是一致的。

第四步

我们一般把所有的文件都写到main.js里面，这样我们的页面在加载的时候，只需要加载一次main.js就行了。
main.js文件代码如下：

我们在html页面<script src="main.js"></script>即可。

但是我们会发现，这样打开浏览器运行时，是没有效果的，我们给的jquery代码好像并没有执行？
但这不是我们代码的问题。这是使用import $ from 'jquery'时，由于ES6的代码太高级了，浏览器解析不了，所以执行时会报错。

第五步

这时，我们就可以通过webpack把我们的main.js里的代码进行一下处理，运行命令：webpack ./src/main.js ./dist/bundle.js。

**注意，如果你是weback4.0+的版本，那么你的命令中就必须带有“-o”：webpack ./src/main.js -o ./dist/bundle.js，“-o”代表输出文件。

webpack之后，是我们的main.js的路径，在main.js路径之后，是我们经过webpack处理后，把文件输出的路径以及名称。此时，在dist目录下会自动生成一个bundle.js的文件

此时，我们在html页面里，就不需要在引用main.js，引用我们的bundle.js：<script src="../dist/bundle.js"></script>，这样我们再去运行页面，就会发现成功了。

特别注意：webpack4.0+版本注意事项

我当时写的时候没有写“-o”，然后代码就报错了，因为我的webpack是4.0+版本。然后查了查资料发现是版本过高导致的错误。

经过演示 webpack可以做什么事情？
1、webpack能够处理JS文件互相依赖的关系。
2、webpack能够处理js的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能识别的语法。
刚才运行的命令格式 webpack 要打包的文件路径 打包好输出的文件路径。

在写这个案例的时候 值得注意 ：如果你是weback4.0+的版本，那么你的命令中就必须带有“-o”：webpack ./src/main.js -o ./dist/bundle.js，“-o”代表输出文件。

第六步

1、简单使用了一下webpack打包，也有一个很大的问题，比如：我在main.js里面对表格的颜色做一下修改，我想把奇数行变成蓝色。
2、运行代码你会发现不行，没有效果，但是你或许也发现了问题的所在，我们改过的代码，没有经过webpack处理，所以没效果。
3、然后我们就需要再去运行一下webpack ./src/main.js ./dist/bundle.js？？？（4.0+版本别忘了“-o”）这样写的话太麻烦了。
4、我们会想，我能不能每次改完之后，不写这么长的命令，直接写个webpack就能打包就好了。办法是有的，不过我们需要一个配置文件：webpack.config.js

注意：webpack.config.js 要放在项目根目录下，如果放错地方，可以剪切到它根目录下（我当时就放错地方了，然后一系列报错）

然后你就可以更改你想换的颜色了，在控制板出输入：webpack，这时我们的打包就好了，打开浏览器就能看到你更改的颜色了。

PS：在错误中成长，加油！