webpack是一个很实用的打包工具，为了能够更透彻的掌握，我决定自己多写一些，作为笔记，当然要是能帮助大家就更好啦！
webpack可以将所有的文件，包括js,css,image等打包成一个js文件，减少请求，提高效率，而且还可以利用浏览器的缓存功能，更快的展示界面。是比gulp和grount更好用的包管理工具，所以接下来就要好好学一下这个工具了。
1、首先得新建一个简单地项目
结构如下：
image.png
目录路径当中不能有汉字，在
cnpm init的时候就会报错（亲测）。
2、然后创建package.json文件
在项目文件夹下执行cnpm init，回车就行。
image.png
3、安装 'webpack-dev-server'
image.png
4、新建webpack.config.js文件
文件内容如下：
image.png
注意：当前目录用的
__dirname是两个下划线因为有两个js文件，所以文件入口写了两个路径，前面的命名自己定
后面的
[name].bundle.js中的name就是刚刚自己命名的入口文件对象名。
5、输出文件
执行webpack命令
image.png
生成文件目录如下：
image.png
6、然后在浏览器访问页面
在各自的index.html中添加script标签，引入对应的index.js文件
然后在webpack.config.js中添加publicPath: '/dist/',指定文件夹
执行命令：webpack-dev-server
然后就报错了：
image.png
说没有找到webpack-dev-server，开始我是直接用
cnpm install webpack-dev-server安装的，然后我尝试全局安装：cnpm install webpack-dev-server -g还是不行，添加如下代码：
image.png
然后
cnpm start,也是不行，然后经过百度尝试，其实是没有安装cnpm i -D webpack,也是醉了最后成功：
image.png
这里面有端口，应该会有所区别，我这是
http://localhost:8081然后在浏览器输入：
http://localhost:8081/admin/或者http://localhost:8081/consumer/就能够看到正常界面啦！还有一个重点，就是不要在package.json里面加注释，报错好难查。也可能是我蠢~~~
网友评论