前幾年入門webpack是在segmentFault上看到的一篇很好的文章,連接在這裏,有興趣的同窗能夠去看看,不過如今到4.x的版本了,好多東西不適用,就想本身再總結一下,一樣,若是你對webpack不少基礎的東西都很明白的話,這篇文章可能對你沒有什麼價值,若是你對webpack的一些概念仍是很模糊,相信跟着這篇文章敲下來應該會有更清晰的認識。css
官網的定義是:html
本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關係圖(dependency graph),其中包含應用程序須要的每一個模塊,而後將全部這些模塊打包成一個或多個 bundle前端
通俗的點來講,webpack就是一個打包器,將你的項目視爲一個總體,經過給定的一個或多個入口,找到項目中全部的依賴文件,使用loaders來處理他們,把你項目裏的代碼(.ts, .scss .less .jsx等文件)打包翻譯成瀏覽器能夠識別的代碼,這樣咱們只須要專一於開發就能夠了。node
初步瞭解webpack後,咱們下面開始使用webpackreact
webpack的安裝有兩種方式:1. 全局安裝 2. 非全局安裝webpack
新建一個空的文件夾:webpack_project, 進入到該目錄下後git
npm init -y // 生成package.json文件
npm install -g webpack // 全局安裝webpack
npm install -D webpack // 安裝在項目目錄webpack
npm install -g webpack-cli // 全局安裝webpack命令行
複製代碼
我在這裏選擇的是安裝在項目目錄中 而後在webpack_project下新建一個src和public的文件夾,src文件夾用來存放咱們要寫的代碼模塊,public文件夾用來存放webpack打包以後供瀏覽器讀取的文件,分別在建立三個文件es6
目錄結構以下github
咱們在index.html文件中寫入最基礎的html代碼:web
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack_project</title>
</head>
<body>
<div id='root'></div>
<script src="bundle.js"></script>
</body>
</html>
複製代碼
在Greeter中暴露出一個返回div的dom元素的函數
// Greeter.js
module.exports = function() {
const greet = document.createElement('div');
greet.textContent = "Hello webpack!";
return greet;
};
複製代碼
main.js文件中咱們將Greeter模塊返回的節點插入頁面
//main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
複製代碼
調出終端在當前項目目錄下:
webpack {enterFile} -o {outputFile} // enterFile 要打包的文件 outputFile打包後的文件
複製代碼
對於本例來講就是:
webpack src/main.js -o public/bundle.js
複製代碼
會看到以下結果:
webpack還有不少其餘的功能,可是這些功能若是都經過命令行來實現很不方便,也極容易出錯,一個好的解決辦法就是使用配置文件,乍一聽配置文件你們可能比較方,其實就是一個Js的模塊,把打包信息放在模塊裏而已
繼續上一個例子來講明如何書寫這個配置文件,在根目錄下新建一個名爲webpack.config.js的文件,放一些很簡單的配置信息,包括入口文件路徑和打包後文件的存放路徑
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
}
}
複製代碼
有了這個文件,下次在打包的時候只須要在終端中輸入webpack便可完成打包了,也許你會以爲在終端中輸入webpack會很奇怪也不直觀,能夠在package.json的script中像我這樣添加一個命令行
npm run start
複製代碼
webpack提供了一個可選的本地開發服務器,能夠監聽你的本地代碼修改,並自動刷新修改後的結果,這個本地服務器基於node.js構建,不過它是一個單獨的組件,在webpack中進行配置以前須要單獨安裝它做爲項目依賴
npm install --save-dev webpack-dev-server
複製代碼
devserver做爲webpack配置選項中的一項,如下是它的一些配置選項,更多配置可參考這裏
devserver的配置選項 | 功能描述 |
---|---|
contentBase | 默認webpack-dev-server會爲根文件夾提供本地服務器,若是想爲另一個目錄下的文件提供本地服務器,應該在這裏設置其所在目錄(本例設置到「public"目錄) |
port | 設置默認監聽端口,若是省略,默認爲」8080「 |
inline | 設置爲 true,當源文件改變時會自動刷新頁面 |
historyApiFallback | 在開發單頁應用時很是有用,它依賴於HTML5 history API,若是設置爲true,全部的跳轉將指向index.html |
把這些配置項添加到webpack配置文件中去,如今的配置文件webpack.config.js
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
}
}
複製代碼
在package.json中的scripts對象中添加以下命令,用以開啓本地服務器:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
複製代碼
在終端中輸入:
npm run server
複製代碼
便可在本地的8080端口查看結果
Loaders能夠說是webpack強大的核心功能之一了,它提供了調用外部腳本的能力,實現對不一樣格式的代碼進行編譯處理,處理成瀏覽器能夠識別的JS,CSS等。好比ts-loader能夠將咱們編寫的.ts文件編譯打包成.js文件,less-loader能夠將.less文件預編譯成.css文件,"react-loader"能夠將.jsx編譯成.js文件等等,下面介紹一些經常使用的loader。
Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置,Loaders的配置包括如下幾方面:
不過在配置loader以前,咱們把Greeter.js裏的問候消息放在一個單獨的JSON文件裏,並經過合適的配置使Greeter.js能夠讀取該JSON文件的值,各文件修改後的代碼以下:
在src文件夾中建立帶有問候信息的JSON文件(命名爲config.json)
{
"greetText": "Hi there and greetings from JSON!"
}
複製代碼
更新後的Greeter.js
const config = require('./config.json');
module.exports = function() {
const greet = document.createElement('div');
greet.textContent = config.greetText;
return greet;
};
複製代碼
Babel實際上是一個編譯JavaScript的平臺,它能夠編譯代碼幫你達到如下目的:
Babel實際上是幾個模塊化的包,其核心功能位於稱爲babel-core的npm包中,webpack能夠把其不一樣的包整合在一塊兒使用,對於每個你須要的功能或拓展,你都須要安裝單獨的包(用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包)。
咱們先來一次性安裝這些依賴包
// npm一次性安裝多個依賴模塊,模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
複製代碼
在webpack的配置文件中配置babel:
module.exports = {
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/public", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/ // 不包括node_modules裏的文件
}
]
}
}
複製代碼
如今你的webpack的配置已經容許你使用ES6以及JSX的語法了。繼續用上面的例子進行測試,不過此次咱們會使用React,記得先安裝 React 和 React-DOM
npm install --save react react-dom
複製代碼
接下來咱們使用ES6的語法,更新Greeter.js並返回一個React組件
報錯:Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'
由於babel-loader的版本問題 先卸載 npm uninstall babel-loader 重裝一個@7的版本 npm i babel-loader@7 -D
從新使用npm start打包,若是以前打開的本地服務器沒有關閉,你應該能夠在localhost:8080下看到與以前同樣的內容,這說明react和es6被正常打包了。
Babel其實能夠徹底在 webpack.config.js 中進行配置,可是考慮到babel具備很是多的配置選項,在單一的webpack.config.js文件中進行配置每每使得這個文件顯得太複雜,所以一些開發者支持把babel的配置選項放在一個單獨的名爲 ".babelrc" 的配置文件中。咱們如今的babel的配置並不算複雜,不過以後咱們會再加一些東西,所以如今咱們就提取出相關部分,分兩個配置文件進行配置(webpack會自動調用.babelrc裏的babel配置選項),以下:
// webpack.config.js
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/public", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
}
]
}
}
複製代碼
// .babelrc
{
"presets": ["react", "env"]
}
複製代碼
到目前爲止,咱們已經知道了,對於模塊,Webpack能提供很是強大的處理功能,那那些是模塊呢。
Webpack有一個不可不說的優勢,它把全部的文件都都當作模塊處理,JavaScript代碼,CSS和fonts以及圖片等等經過合適的loader均可以被處理。
webpack提供兩個工具處理樣式表,css-loader 和 style-loader,兩者處理的任務不一樣,css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中,兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。
繼續上面的例子
// 安裝
npm install --save-dev style-loader css-loader
複製代碼
配置更新以下,添加css-loader,style-loader:
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
]
}
};
複製代碼
接下來,在src文件夾裏建立一個名字爲"main.css"的文件,對一些元素設置樣式
/* main.css */
html {
box-sizing: border-box;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
複製代碼
咱們這裏例子中用到的webpack只有單一的入口,其它的模塊須要經過 import, require, url等與入口文件創建其關聯,爲了讓webpack能找到」main.css「文件,咱們把它導入」main.js 「中,這樣webpack就能找到main.css了,以下
//main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import './main.css';//使用require導入css文件
render(<Greeter />, document.getElementById('root'));
複製代碼
上面的代碼說明webpack是怎麼把css當作模塊看待的,我們繼續看一個更加真實的css模塊實踐
JavaScript經過一些新的語言特性,更好的工具以及更好的實踐方法(好比說模塊化)發展得很是迅速。模塊使得開發者把複雜的代碼轉化爲小的,乾淨的,依賴聲明明確的單元,配合優化工具,依賴管理和加載管理能夠自動完成。
不過前端的另一部分,CSS發展就相對慢一些,大多的樣式表卻依舊巨大且充滿了全局類名,維護和修改都很是困難。
被稱爲CSS modules的技術意在把JS的模塊化思想帶入CSS中來,經過CSS模塊,全部的類名,動畫名默認都只做用於當前模塊。Webpack對CSS模塊化提供了很是好的支持,只須要在CSS loader中進行簡單配置便可,而後就能夠直接把CSS的類名傳遞到組件的代碼中,這樣作有效避免了全局污染。具體的代碼以下
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
}
]
}
]
}
};
複製代碼
咱們在app文件夾下建立一個Greeter.css文件來進行一下測試
/* Greeter.css */
.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
複製代碼
導入.root到Greeter.js中
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//導入
class Greeter extends Component{
render() {
return (
<div className={styles.root}> //使用cssModule添加類名的方法
{config.greetText}
</div>
);
}
}
export default Greeter
複製代碼
結果相同的類名也不會形成不一樣組件之間的污染。
Sass 和 Less 之類的預處理器是對原生CSS的拓展,它們容許你使用相似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS,CSS預處理器能夠這些特殊類型的語句轉化爲瀏覽器可識別的CSS語句,
你如今可能都已經熟悉了,在webpack裏使用相關loaders進行配置就可使用了,如下是經常使用的CSS 處理loaders:
不過其實也存在一個CSS的處理平臺-PostCSS,它能夠幫助你的CSS實現更多的功能,查看這裏能夠了解更多 舉例來講如何使用PostCSS,咱們使用PostCSS來爲CSS代碼自動添加適應不一樣瀏覽器的CSS前綴。
首先安裝postcss-loader 和 autoprefixer(自動添加前綴的插件)
npm install --save-dev postcss-loader autoprefixer
複製代碼
接下來,在webpack配置文件中添加postcss-loader,在根目錄新建postcss.config.js,並添加以下代碼以後,從新使用npm start打包時,你寫的css會自動根據Can i use裏的數據添加不一樣前綴了。
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
}
};
複製代碼
至此,本文已經談論了處理JS的Babel和處理CSS的PostCSS的基本用法,它們其實也是兩個單獨的平臺,配合webpack能夠很好的發揮它們的做用。接下來介紹Webpack中另外一個很是重要的功能-Plugins
插件(Plugins)是用來拓展Webpack功能的,它們會在整個構建過程當中生效,執行相關的任務。 Loaders和Plugins經常被弄混,可是他們實際上是徹底不一樣的東西,能夠這麼來講,loaders是在打包構建過程當中用來處理源文件的(JSX,Scss,Less..),一次處理一個,插件並不直接操做單個文件,它直接對整個構建過程其做用。
Webpack有不少內置插件,同時也有不少第三方插件,可讓咱們完成更加豐富的功能。
要使用某個插件,咱們須要經過npm安裝它,而後要作的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例(plugins是一個數組)繼續上面的例子,咱們添加了一個給打包後代碼添加版權聲明的插件。
const webpack = require('webpack');
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權全部,翻版必究')
],
};
複製代碼
經過這個插件,打包後的JS文件頭就會有以下效果:
這個插件的做用是依據一個簡單的index.html模板,生成一個自動引用你打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用(好比添加了hash值)。 安裝:
npm install --save-dev html-webpack-plugin
複製代碼
這個插件自動完成了咱們以前手動作的一些事情,在正式使用以前須要對一直以來的項目結構作一些更改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
複製代碼
更新webpack的配置文件,方法同上,新建一個build文件夾用來存放最終的輸出文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權全部,翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一個這個插件的實例,並傳入相關的參數
}))
],
};
複製代碼
再次執行npm start你會發現,build文件夾下面生成了bundle.js和index.html。
Hot Module Replacement(HMR)也是webpack裏頗有用的一個插件,它容許你在修改組件代碼後,自動刷新實時預覽修改後的效果。
在webpack中實現HMR也很簡單,只須要作兩項配置:
不過配置完這些後,JS模塊其實仍是不能自動熱加載的,還須要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載,雖然這個API不難使用,可是若是是React模塊,使用咱們已經熟悉的Babel能夠更方便的實現功能熱加載。
整理下咱們的思路,具體實現方法以下:
仍是繼續上例來實際看看如何配置
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權全部,翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一個這個插件的實例,並傳入相關的參數
})),
new webpack.HotModuleReplacementPlugin() // 熱加載
],
};
複製代碼
安裝react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr
複製代碼
配置Babel
// .babelrc
{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
複製代碼
如今當你使用React時,能夠熱加載模塊了,每次保存就能在瀏覽器上看到更新內容。
webpack提供了一些在發佈階段很是有用的優化插件,它們大多來自於webpack社區,能夠經過npm安裝,經過如下插件能夠完成產品發佈階段所需的功能
咱們繼續用例子來看看如何添加它們,OccurenceOrder 和 UglifyJS plugins 都是內置插件,你須要作的只是安裝其它非內置插件
npm install --save-dev extract-text-webpack-plugin
複製代碼
而後再配置他們
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/src/main.jsx", //入口文件
output: {
path: __dirname + "/build", //存放打包後的文件路徑
filename: "bundle.js" //打包後的文件名
},
devServer: {
contentBase: "./public", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true // 開啓實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/, // 匹配以jsx或者js爲結尾的文件
use: {
loader: "babel-loader", // 用babel-loader處理以上被匹配上的文件
// babel配置遷移到.babelrc下
/*
options: {
presets: [
"env", "react"
]
}
*/
},
exclude: /node_modules/ // 不包括node_modules裏的文件
},
{
test: /\.css$/,
// 同一個文件類型使用多個loader用一個數組包裹便可
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
},
}
},
{
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權全部,翻版必究'),
new HtmlWebpackPlugin(({
template: __dirname + "/src/index.tmpl.html" // new 一個這個插件的實例,並傳入相關的參數
})),
new webpack.HotModuleReplacementPlugin(), // 熱加載
new ExtractTextPlugin("style.css"),
new webpack.optimize.OccurrenceOrderPlugin(),
],
};
複製代碼
緩存無處不在,使用緩存的最好方法是保證你的文件名和文件內容是匹配的(內容改變,名稱相應改變)
webpack能夠把一個哈希值添加到打包的文件名中,使用方法以下,添加特殊的字符串混合體([name], [id] and [hash])到輸出文件名前
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
..
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
...
};
複製代碼
如今用戶會有合理的緩存了。
引入clean-webpack-plugin插件後在配置文件的plugins中作相應配置便可:
安裝:
npm install clean-webpack-plugin --save-dev
複製代碼
配置:
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
plugins: [
...// 這裏是以前配置的其它各類插件
new CleanWebpackPlugin()
]
複製代碼
關於clean-webpack-plugin的詳細使用可參考這裏
這是一篇好長的文章,謝謝你的耐心,能仔細看到了這裏