首先是webpack的安裝，全域性安裝或者本地安裝，建議專案本地安裝；

npm install webpack -g //全域性安裝
npm install webpack --save-dev //本地安裝

配置檔案

• 根目錄建立檔案webpack.config.js
• 配置入口、出口、外掛等配置項，配置package.json檔案scripts專案，簡單配置
• module.exports = {
entry: "./src/script/index.js",
output: {
path: __dirname + "/build/script",
filename: "[name].js"
}
}
• {
"scripts": {
"webpack": "webpack"
},
"devDependencies": {
"webpack": "^3.10.0"
}
}
• 如上配置，命令列鍵入nm run webpack,完成第一次的打包；在build的script目錄下生成main.js檔案；

less編譯打包

• less編譯打包，就需要使用強大的loaders；編譯es6，json等同樣需要安裝所需loader
• 安裝npm install --save-dev style-loader less-loader css-loader less //注：需安裝四個，且是必須的。
• module.exports = {
entry: "./src/script/index.js",
output: {
path: __dirname + "/build/script",
filename: "[name].js"
},
module: {
rules: [{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "style-loader"
}{
loader: "css-loader"
}, {
loader: "less-loader"
}]
})
}]
},
• 在入口檔案index.js中import進需要編譯的less檔案//因為是將入口檔案進行打包處理，所以必須import到入口檔案中；
• 然後執行npm run webpack；完成打包，在引入了index.js檔案的html頁面就能正常顯示樣式了，此時的樣式是編譯後，生成了一個style的標籤，樣式是內聯的

• 這樣存在一個問題，線上的css不能被快取，而且編譯的index.js檔案也會變得異常大，對於前端效能優化是很不利的，也是比較第幾部成熟的做法，所以，直接打包進jindex.js；只適合線上下開發使用；所以需要進行分離編譯打包：

  • 使用extract-text-webpack-plugin外掛，盡心本地安裝
    
    • cnpm install --save-dev extract-text-ebpack-plugin
  • 在webpack.config.js中引入
    
    • const ExtractTextPlugin = require("extract-text-webpack-plugin"); //分離css
const extractLess = new ExtractTextPlugin({
filename: "../style/[name].css",
disable: process.env.NODE_ENV === "development"
});;注意filename的路徑，配置到自己目錄css檔案所在檔案目錄；

  • 修改less-loader的配置：{
test: /\.less$/,
use: extractLess.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
};

  • 新增外掛

  • plugins: [
    extractLess
    ]

  npm run webpack;在 build目錄下會生成一個css檔案，這樣就能分離並且編譯less檔案了；

今天就到這裡，越努力越幸運