webpack4 x學習筆記

有輸入必須有輸出，今天就來輸出一下學習webpack的過程。

不得不先吐槽一下，比起可愛的grunt和好用的gulp，對webpack真心愛不起來！

還有乙個血的教訓：千萬不要偷懶，有問題直接去官網。。。

本文旨在記錄學習webpack的過車和遇到的問題，適合對node和webpack基礎知識有些了解的開發人員，不會詳細到記錄操作命令；還有些問題無解，還請高手指教。

首先貼上搭建時候各種包的版本，畢竟webpack每次公升級相容性都不太好

作業系統：windows 10；node：v8.9.4

搭建步驟

1、安裝webpack，webpack-cli，webpack-dev-server  html-webpack-server  （webpack-cli在4.x的版本中已經被抽離，這裡需要再安裝一下）；

對應配置： 

a、在package.json的scripts中配置啟動server的命令。

b、在webpack.config.js中配置入口，出口，以及server；

有關server的更多配置引數請參考  

c、配置html-webpack-plugin，在編譯後的資料夾自動生成乙個html，並且已經新增了編譯後的入口js；

配置後webpack.config.js：（這時候我們就可以直接用 npm run dev 來啟動服務了。）

const webpack = require('webpack');

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
module.exports =,
output: ,
devserver: ,
bypass: 
function
(req, res, proxyoptions)}}
},plugins: [
newhtmlwebpackplugin() ]}

a、安裝js處理包：babel-loader  babel-ccore  babel-preset-env並配置

babel-preset-env 可以根據配置的env只編譯那些還不支援的特性，詳情請參考

}

}

安裝css分離處理外掛程式  extract-webpack-text-plugin，把css樣式從html頁面摘出來放到單獨的檔案中

sass-loader 依賴於 node-sass，所以這裡不要忘記安裝 node-sass；

首先引入extract-webpack-text-plugin，並new出兩個物件來，分別處理css和less，傳參為處理後樣式的儲存路徑：

const extracttextplugin = require("extract-text-webpack-plugin");

const extractcss = new extracttextplugin('css/[name].css');
const extractless = new extracttextplugin('css/[name].css');

,

)},

plugins: [

newhtmlwebpackplugin(),
extractcss,
extractless
]

注意：文件裡介紹url-loader是基於file-loader封裝的支援更多配置的loader，但是經測試發現，url-loader並不能單獨使用，需要同時安裝file-loader才可

}

]},}

uglifyjsplugin，這個外掛程式在4.x的版本中，也已經被獨立出來，需要單獨安裝才能使用。

關於模組熱載入的開啟，官方文件中給出多種實現，這裡給出使用devserver實現方式的測試：

其他實現方式詳情參考

在devserver 中設定 hot: true，在plugins中新增webpack.hotmodulereplacementplugin();

測試結果：

修改html檔案：瀏覽器打出hmr字樣的提示，但是頁面並沒有變化：

修改js檔案：編譯後頁面完全重新整理；

當我打算繼續配置多入口多頁面時，竟然發現我只能迴圈呼叫 html-webpack-plugin來生成html；

到目前位置，webpack給我的感覺就是編譯速度慢，文件介紹不清晰以至於奇奇怪怪的bug乙個又乙個，這些感受大概是因為學習不夠深入，不夠細緻。

最後，貼出package.json和webpack.config.js

,

"keywords": ,
"author": "",
"license": "isc",
"devdependencies": ,
"dependencies": 
}

const webpack = require('webpack');

const path = require('path');
const htmlwebpackplugin = require('html-webpack-plugin');
const uglifyjsplugin = require('uglifyjs-webpack-plugin');
const extracttextplugin = require("extract-text-webpack-plugin");
const extractcss = new extracttextplugin('css/[name].css');
const extractless = new extracttextplugin('css/[name].css');
module.exports =,
output: ,
devserver: ,
bypass: 
function
(req, res, proxyoptions)}}
},plugins: [
newhtmlwebpackplugin(),
newuglifyjsplugin(
}),new webpack.hotmodulereplacementplugin(),//
熱載入外掛程式
extractcss,
extractless
],module: }},
,,}]
*/},)},
}]},}]}}

webpack 4 x安裝命令

執行npm i webpack g全域性安裝webpack，這樣就能在全域性使用webpack的命令 在專案根目錄中執行npm i webpack安裝到專案依賴中 執行npm init y初始化專案 建立專案基本的目錄結構src 和 dist,在src裡新建index.html 使用npm i jq...

webpack 4 X 基礎編譯

webpack4.x的打包已經不能用webpack 檔案a 檔案b的方式，而是直接執行webpack mode development或者webpack mode production，這樣便會預設進行打包，入口檔案是 src index.js 輸出路徑是 dist main.js 其中src目錄即...

webpack4 x急速入門指南

1 全域性安裝 webpack3.x npm install webpack g webpack4.x npm install webpack cli g 2 初始化，生成package.json npm init 3 區域性安裝 npm install webpack s npm install ...