webpack模組載入css檔案及圖片地址

標籤：封裝   comm   plugins   jquery   pac   檢查   請求   handle   使用者   

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解決了問題。

webpack模組載入css檔案及圖片地址