webpack模塊加載css文件及圖片地址

webpack支持css文件加載並打包，只需安裝相應加載器並在配置文件中配置 。

加載的css文件內容會與該模塊裏的js內容混合封裝，這樣作的好處是一個js文件包含了全部的css與js內容，有效減小了http請求次數，顯著提升了頁面響應性能的用戶體驗。

加載css文件時，若是css裏含有圖片的引用地址，編譯時webpack會將圖片資源處理並輸出到設置的publicPath參數位置，該參數能夠是以頁面爲基準的相對地址，也能夠是以根目錄爲基準的絕對地址。url-laoder會在這個地址下興建一個image文件夾用來存放處理事後的圖片。

  //入口文件輸出配置
    output: {
        path: './js',
        filename: '[name].js',
        publicPath:"/js/"
    },

    //插件項
    plugins: [commonsPlugin,new webpack.ProvidePlugin({
        $ : "jquery",
        /*React:"react",
        ReactDOM:"react-dom",*/
    }),/*new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js')*/
        ],


    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.(js|jsx)$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=25000&name=images/[hash:8].[name].[ext]'},
            { test: /\.(hbs|html)$/, loader: "handlebars"},

        ]
    },

若是你在編譯時報錯，但是你檢查確實安裝好了各類加載器，編譯時依然報錯，友情提醒這時候你應該去從新安裝下file-loader，我就曾在圖片地址解析時莫名報錯，查了許久，重裝file-loader解決了問題。