1、webpack打包默認配置文件webpack.config.js

2、打包js文件：有這個文件並配置可以直接在cmd上webpack打包，沒有這個文件要在cmd上輸入 webpack main.js build.js

3、打包css文件：要在cmd上輸入npm install style-loader css-loader 安裝

module.exports={
    //配置js
    entry:‘./main.js‘,//webpack要打包的源文件
    output:{
        filename:‘build.js‘//打包輸出的文件名稱
    },
    module:{
        loaders:[
            {
                test:
 
/\.css$/,      //配置css
                loader:‘style-loader!css-loader‘
            },
            {
                test: /\.(png|jpg)$/,   //配置css中的圖片，html中的圖片示例在下面
                loader: ‘url-loader?limit=8192‘
            }
        ]
    }
};

url-loader 後面除了 limit 字段，還可以通過 name 字段來指定圖片打包的目錄與文件名：

module: {
　　loaders: [
　　　　{
　　　　　　test: 
 
/\.(png|jpg)$/,
　　　　　　loader: ‘url-loader?limit=8192&name=images/[hash:8].[name].[ext]‘
　　　　}
　　]
}

上例中的 name 字段指定了在打包根目錄（output.path）下生成名為 images 的文件夾，並在原圖片名前加上8位 hash 值。

css 文件和 images 文件夾保持了同樣的層級，可以不做任務修改即能訪問到圖片。區別是打包後的圖片加了 hash 值，bundle.css 文件裏引入的也是有hash值的圖片。

output.publicPath 表示資源的發布地址，當配置過該屬性後，打包文件中所有通過相對路徑引用的資源都會被配置的路徑所替換。

output: {
　　path: ‘dist‘,
　　publicPath: ‘/assets/‘,
　　filename: ‘bulid.js‘
}

4、打包圖片：打包圖片有三種，html中的圖片，css中的圖片，js中的圖片，在 webpack 中引入圖片需要依賴 url-loader 這個加載器。npm install url-loader --save-dev

　 test 屬性代表可以匹配的圖片類型，除了 png、jpg 之外也可以添加 gif 等，以豎線隔開即開。loader 後面 limit 字段代表圖片打包限制，這個限制並不是說超過了就不能打包，而是指當圖片大小小於限制時會自動轉成 base64 碼引用。

由於 webpack 對 html 的處理不太好，打包 HTML 文件中的圖片資源是相對來說最麻煩的。這裏需要引用一個插件—— html-withimg-loder $ npm install html-withimg-loader --save-dev

module: {
loaders: [
    {
        test: /\.html$/,
        loader: ‘html-withimg-loader‘
    }
]
}

註：在 build.js 中引用 html 文件

import ‘../index.html‘;

JS中的圖片應該是通過模塊化的方式引用圖片路徑

var imgUrl = require(‘./images/bg.jpg‘),
imgTempl = ‘<img src="‘+imgUrl+‘" />‘;
document.body.innerHTML = imgTempl

1）需要引用的分支文件

//配置文件出口
module.exports={
    addFun:add
};

2）需要引用的主文件

require("./com.css");//引入要打包的css文件
var cale=require(‘./add.js‘);//引入要打包的js文件
console.log(cale.addFun(1,2));//調用函數方法

註：壓縮build.js直接在cmd上輸入webpack -p

webpack打包js，css和圖片