webpack踩坑笔记（一）

1.css文件单独打包 extract-text-webpack-plugin 插件报错 You may need an appropriate loader to handle this file type.

刚开始配置是这样的，看着毫无毛病，但是一直报错，始终找不到原因

loaders: [
     {
         test: /\.css$/,
         exclude: /node_modules/,
         loader: ExtractTextPlugin.extract("style-loader","css-loader")
     }
]

最终终于找到，要这样写的话就OK了，还是不明白WHY？（望指教）

rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: 'css-loader',
        fallback: 'style-loader'
      })
    }]

2.图片资源打包完成，但是页面并没有从服务器下载资源。

这里 npm run build 已经成功打包图片，但是在页面里并没有加载 image 文件夹

终于发现是css文件中，设置背景图片使用的是 background-image: ;换成background: ;就可以加载图片资源了。真是个奇妙的坑。

3.webpack打包后，脚本中动态添加的图片路径不会转换的问题

在脚本文件中动态向HTML页面中的图片添加路径，发现在经过webpack打包后的的页面中直接通过脚本添加路径还是原来在开发环境中的编辑的路径，原因是在js脚本动态向HTML添加的图片路径需要通过 require()引入才会被webpack转换到打包后页面的正确路径，demo:

//errorDemo: var ImgSrc1 = require('../../image/banner/banner1.jpg'),这样先赋值给变量，在将变量添加到bannerData中也是无效的。

//轮播图的数据
var bannerData = [
	{bannerId: 100021, bannerImg: require('../../image/banner/banner1.jpg'), bannerImgName: '1'},
	{bannerId: 100030, bannerImg: require('../../image/banner/banner2.jpg'), bannerImgName: '2'},
	{bannerId: 100016, bannerImg: require('../../image/banner/banner3.jpg'), bannerImgName: '3'},
	{bannerId: 100001, bannerImg: require('../../image/banner/banner4.jpg'), bannerImgName: '4'},
	{bannerId: 100021, bannerImg: require('../../image/banner/banner5.jpg'), bannerImgName: '5'}
]

//通过引用swiper插件封装的自动生成轮播图的组件，将数据bannerData经过hogan.js模板引擎编译成HTML，插入页面后生成swiper轮播图
$(document).ready(function() {
    //生成轮播图的方法，params(轮播图容器，轮播图数据，轮播图宽度，轮播图宽度)
	swiperComponent.init('.banner-con', {bannerList: bannerData}, 830, 350);
});