第一步：
安裝webpack，若沒安裝，請先參考:
第二步：
新建乙個英文的資料夾（中文的後面可能會有問題），我這裡新建demo檔案
①進入資料夾，上方搜尋框輸入cmd開啟命令終端
②在終端依次輸入：
npm init -y //初始化
npm install babel-loader babel-core -d
npm install babel-preset-es2015 babel-plugin-transform-runtime -d
npm install css-loader style-loader autoprefixer-loader -d //配置css模組，打包css**成js
第三步
開啟vs code，開啟demo件夾，然後新建檔案.babelrc使用外掛程式
新建檔案webpack.config.js,複製下面的**
const path=require(『path』)
module.exports = ,
// 配置不同型別檔案模組的載入
module: ' at position 64: …der' ] }̲, // 配置less文…/,
use: [
『style-loader』,
『css-loader』,
『less-loader』]},
// 配置解析es6為es5}],
// 排除掉這裡的js模組，不然webpack解析他們，提高打包速度
回到demo資料夾下新建src資料夾
再建index.html檔案
回到vs，在src資料夾下建立main.js檔案，隨便寫點**，引入css檔案
然後也是在src下建立main.css檔案，隨便寫點**
第四步
開啟index.html引入dist資料夾下的build.js檔案（剛才打包生成的檔案）
執行alt+b開啟頁面檢視效果
這樣就算是成功了。
總結
本次程式src下只有兩個檔案main.js和main.css，打包出來的只有乙個dist下的build.js，打包程式的檔案入口都是src下的main.js,所以要創main.js，在main.js裡引入所有css檔案。每次更新**都要重新打包。
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...
webpack打包檔案
webpack.config.js是自己建立的打包檔案 在檔案的跟目錄下 引用html webpack plugin 首先要 npm install html webpack plugin s 在命令列中執行一下 let path require path 引入這個檔案就不會把相對路徑變成絕對路徑 ...