webpack打包项目教程(还是遇到了打包后背景图片不显示的深坑以及html中的img不显示的问题，爬了一天多才豁然开朗)

首先，在确认已经安装好nodejs、npm、webpack后新建一个文件夹，这里我建的文件夹名为logined。不知道webpack怎么安装的可以看我写的上一篇，webpack安装配置以及填坑操作。

mkdir logined

用编辑器打开该文件夹所在路径，然后创建一个js文件夹 在js文件夹下建一个index.js文件

然后敲命令

webpack index.js bundle.js

这样通过打包就在bundle.js中输出了，在html页面中引入bundle.js这个脚本，然后把所有需要打包的文件路径在index.js中编写就好了 我这里是2个css 2个js 还有一个html文件

然后，创建一个自动匹配的package.json。命令如下 我这里用git Bash敲的命令行

npm init -f

除了这条命令之外，npm init -y或者--yes或--force都可以，当然我使用的是上面的-f那条命令。命令敲对后，出现如下界面即安装成功。下图中的main对应的是输出的js文件。此时在项目中将看到package.json这个文件

在package.json的同级目录下，再建一个webpack.config.js输入以下内容。entry对应的是输入的js，output对应的是输出的js

path是输出的路径，filename对应的是输出的js文件名。module里面的loaders对应的这些对象是加载器。第一次是css和行内样式style的 第二个对应的是图片的加载器，第三个是html加载器

webpack.config.js写好之后，切回git Bash 进行进一步的安装 

npm install css-loader style-loader

npm install url-loader

npm install file-loader

npm install extract-loader

npm install html-loader

npm install jquery --save-dev

     上面那条命令是--save 不知道为什么 一打--就变成一条线了 看起来

 这些命令都敲完了以后，直接敲命令

webpack

如果没有报错，证明已经都ok了，上面的内容都是我跑过的，没问题的。下面说说我遇到的图片打包问题吧，真是让人秃头

刚开始我安装好了用了file-loader 也同样用了url-loader 这两个里面都包含了png jpg 可以说是冲突了 我认为 后期修改了就好用了 我也把我前期的错误代码贴上来一下吧 大家可以注意一下，从下面开始的图片是我敲错的代码。大家看上面的步骤就行，下面的就是仅供读一读，省的你们也踩坑。下面这图 我真是换了很多种方式。包括路径、加不加[hash:8]反正试了好多方法也删掉了很多。

到最后我发现我用limit限制字节大小后，就会在dist文件夹下的images下面生成部分base64命名的图片如图2这种的，然后路径就错误了，因为我的css本身调用的背景图片路径都是图中1的路径地址，在css中修改路径为dist/images也报错，在option的publicPath里面修改也不对。我也是愚钝了，看到这篇文章的人，要是知道我问题出在哪里可以给我评论，然后我再试试。哈哈 我是上网百度了也看了好多，最终我觉得可能是因为冲突了，所以去掉一个 把limit去掉就好用了

除了这个坑，还有一个就是html中的img src路径下的图片也不显示，后期根据查阅度娘和外网等吧，发现是因为html-loader的问题 因此我果断又npm install 一个html-loader和extract-loader 然后图片就显示出来了 也不知道其他人会不会遇到与我一样的问题。希望你遇到同样的问题时，直接关键字就能搜到我这篇文章，可以少走弯路啊。后面附一个我总结的应该敲的命令

这个是我最后成品的效果，当然这些我还没有做监听，没有改端口号、没有给缓存加密等等，也就是说到这部我还没有修改package.json里面的内容

想看源码的，可以访问 我的github上这个项目打包的源码https://github.com/create13/plugins/tree/master/loginedWebpack 仅供参考交流