1.安裝webpack依賴

npm init    //初始化，創(chuàng)建package.js
npm install --save-dev webpack    //在項目中安裝依賴包
npm install -g webpack    //全局安裝

2.回到原文件夾，創(chuàng)建兩個文件夾，src存放源文件，dist存放打包后的js文件（供瀏覽器讀?。?，創(chuàng)建index.html

項目結(jié)構(gòu).png

src里創(chuàng)建script及style兩個文件夾，用于存放腳本及樣式。
script里創(chuàng)建main.js(作為文件入口)。

3.配置文件

回到原文件夾，創(chuàng)建webpack.config.js

module.exports={
    entry: __dirname + '/src/script/main.js'，//文件入口，最好使用絕對路徑
    output:{
        path: __dirname + '/dist/js',    //打包后文件存放的地方
        filename:'bundle.js'      //打包后的文件名
     // filename:'bundle-[hash].js'     //亦可添加hash值到打包文件中(避免緩存)
    }
}

注：“__dirname”是node.js中的一個全局變量，指向當(dāng)前腳本所在的目錄。
注：若修改默認(rèn)文件名(webpack.config.js)，則需要在運(yùn)行webpack時指定配置文件名，即webpack --config 修改后的文件名

4.打包

• 全局安裝——只需在終端輸入webpack
• 非全局安裝——需執(zhí)行命令node_modules/.bin/webpack

查看dist下是否生成bundle.js，以判斷webpack是否生效。

webpack運(yùn)行成功.jpg

• 自定義打包命令
  在package.json中對script對象進(jìn)行相關(guān)設(shè)置：

"scripts": {
    "start":"webpack"
}

直接運(yùn)行npm run start

注：start / stop/test 是npm特殊命令，可省略‘run’，直接執(zhí)行npm start / npm stop / npm test即可。

webpack參數(shù)其他配置

package.json文件
“script”:{
      "webpack":"webpack --config webpacke.config.js --progress//打包過程 --display-module//打包模塊 --colors//打包字彩色 --display-reason//打包原因"
}

多個入口配置

module.exports={
    entry:{
          main:__dirname + '/src/script/main.js',
          a:__dirname + '/src/script/a.js'
    }
    output:{
        path: __dirname + '/dist/js',    
        filename:'[name]-[hash].js'
     // filename:'[name]-[chunkhash].js' //MD5算法,確保每個文件的版本號不同
    }
}
//輸出：  ./dist/js/main.js , ./dist/js/a.js