webpack的基本使用
參考：http://www.javashuo.com/article/p-gqgzutje-er.htmlcss
一、webpack的概念
本質上，webpack 是一個現代JavaScript 應用程序的靜態模塊打包器。當 webpack 處理應用程序時，webpack 從命令行或配置文件中定義的一個模塊列表開始，處理你的應用程序。它會遞歸地構建一個依賴關係圖，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle，一般只有一個 - 可由瀏覽器加載。html
二、webpack的安裝
全局安裝：vue
npm i webpack -g
本地安裝：node
npm i webpack -D
webpack 若是全局安裝了的話就能夠直接在命令行中直接運行webpack，若是沒有全局安裝就沒法在命令行直接編譯，無論有沒有配置 package.json 或者 webpack.config.js 文件。react
經過命令行來直接運行 webpack 命令，有些webpack版本若是你不事先在出口文件夾中創建對應的出口文件的話就會報錯。因此不建議直接用命令 webpack 來運行編譯，而是經過本地安裝而後使用 npm 命令編譯。webpack
因此webpack通常會安裝在本地，先配置 package.json 文件中的 scripts 選項和配置 webpack.config.js，而後經過 npm 命令來運行，好比：運行 npm run build 來編譯 。git
2.一、版本問題
webpack中的版本並非越新越好，新版本或許還在測試階段，甚至還有bug。新的版本好比4.xx就須要安裝webpack-cli，而舊的版本好比3.5.3就不須要安裝webpack-cli（好像是由於新的版本webpack和webpack-cli分離了，而舊的版本中webpack包括了webpac-cli）.es6
當我使用最新版本編譯時會報一些莫名其妙的錯誤，目前使用 webpack@3.5.3 版本沒有問題。github
三、使用webpack
構建一個以下圖的項目架構：web
在 main.js 文件中引用 Greeter.js 文件，在 index.html 文件中直接引用 將要生成的 bundle.js 文件而不是 main.js 或者 Greeter.js 文件。
運行webpack：（注意，下面的是直接用全局安裝的webpack進行編譯，咱們並不建議這麼作）
webpack app/main.js public/bundle.js //全局安裝了webpack node_modules/.bin/webpack app/main.js public/bundle.js //沒有全局安裝 webpack
3.一、配置 webpack.config.js 文件
Webpack擁有不少其它的比較高級的功能，這些功能其實均可以經過命令行模式實現，但很是不方便，因此定義一個配置文件很是有必要。這個配置文件其實也是一個簡單的JavaScript模塊，咱們能夠把全部的與打包相關的信息放在裏面。
下面代碼保存爲一個 webpack.config.js 文件：
module.exports = { entry: __dirname + "/app/main.js", //已屢次說起的惟一入口文件 output: { path: __dirname + "/public", //打包後的文件存放的地方，__dirname 是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。 filename: "bundle.js" //打包後輸出文件的文件名 } }
配置好該文件以後，只需在終端裏運行 webpack 命令就能夠了(非全局安裝此時仍需使用node_modules/.bin/webpack)，這條命令會自動引用webpack.config.js文件中的配置選項
3.二、配置 package.json 文件來使用 npm 命令進行編譯
對 npm 進行配置後能夠在命令行中使用簡單的 npm start命令來替代全局 webpack 命令，在package.json中對scripts對象進行相關設置便可。
{ "name": "webpack-sample-project", "version": "1.0.0", "description": "Sample webpack project", "scripts": { "start": "webpack" // 修改的是這裏，JSON文件不支持註釋，引用時請清除。若是對應的命令名不是 start 而是其它的話，想要在命令行中運行時，須要加上 run，好比：npm run build }, "author": "zhang", "license": "ISC", "devDependencies": { "webpack": "3.10.0" } }
此後，直接在命令行運行 npm start 就可實現編譯。注意：此時編譯使用的 webpack 是先會找本地安裝的 webpack，而後纔是全局安裝的。咱們建議使用這種方式，且建議本地安裝而不是全局安裝 webpack。
四、使用 Source Maps（使調試更容易）
若是原文件中代碼出錯，經過打包後在瀏覽器中很難找到對應的出錯的地方，此時的出錯提示並不必定會指出正確的代碼出錯文件名和位置。而Source Maps能解決這個問題。
經過簡單的配置，webpack就能夠在打包時爲咱們生成的source maps，這爲咱們提供了一種對應編譯文件和源文件的方法，使得編譯後的代碼可讀性更高，也更容易調試。
在webpack的配置文件中配置source maps，只須要配置devtool
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } }
devtool 字段有不少選項，網上看到都推薦開發時使用：cheap-module-eval-source-map 字段，生產時使用：cheap-module-source-map。
可是開發時使用cheap-module-eval-source-map 字段報的錯誤是在編譯後的文件中
我以爲這很是有問題啊，cheap-module-eval-source-map 和 eval-source-map 字段在瀏覽器中都不能很好地顯示錯誤的位置，而 cheap-module-source-map 和 source-map 字段就能很好顯示錯誤出現的文件名和行數。
因此我建議使用：cheap-module-source-map
官網建議開發使用：eval-source-map，可是這個有些錯誤在瀏覽器中並不能很好地展現出來，而是要展開才行，錯誤文件在第一行。生產時使用：none
五、構建本地服務器（瀏覽器自動刷新）
devserver 能讓瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果。
Webpack提供一個可選的本地開發服務器，該服務器基於node.js構建。它是一個單獨的組件，在webpack中進行配置以前須要單獨安裝它做爲項目依賴
npm install --save-dev webpack-dev-server
配置webpack.config.js 文件：
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/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
經過使用不一樣的loader，webpack有能力調用外部的腳本或工具，實現對不一樣格式的文件的處理，好比說分析轉換scss爲css，或者把下一代的JS文件（ES6，ES7)轉換爲現代瀏覽器兼容的JS文件。對React的開發而言，合適的Loaders能夠把React的中用到的JSX文件轉換爲JS文件。
Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括如下幾方面：
test：一個用以匹配loaders所處理文件的拓展名的正則表達式（必須）loader：loader的名稱（必須）include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；query：爲loaders提供額外的設置選項（可選）
6.一、CSS-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版本過高編譯可能會出錯，建議下降版本好比 css-loader@1.0.1 可用
//使用 module.exports = { ... module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, //對同一個文件引入多個loader的方法。loader的做用順序是後面的loader先開始做用 use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] } };
而後就能夠在JS文件中引入css文件了。好比使用下面的7.1配置好解析 jsx 的babel包後，就可使用下面的語法：
假設有一個 main.css 文件：
body {
backgroud: green;
}
咱們這裏例子中用到的webpack只有單一的入口，其它的模塊須要經過 import, require, url等與入口文件創建其關聯，爲了讓webpack能找到」main.css「文件，咱們把它導入」main.js 「中，以下
//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'));
一般狀況下，css會和js打包到同一個文件中，並不會打包爲一個單獨的css文件。不過經過合適的配置webpack也能夠把css打包爲單獨的文件的。
webpack3.*/webpack2.*內置可處理JSON文件，而無需添加webpack1.*須要的json-loader，因此咱們能夠直接在一個 JS 文件中直接引入一個 json 文件，好比：
建立一個config.json文件：
{ "greetText": "Hi there and greetings from JSON!" }
在Greeter.js文件中直接引入：
var config = require('./config.json'); module.exports = function() { var greet = document.createElement('div'); greet.textContent = config.greetText; return greet; };
七、Babel
Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：
- 讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持；
- 讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；
7.一、Babel的安裝與配置
Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包.
用得最多的是解析Es6的babel-preset-包和解析JSX的babel-preset-react包。
下面測試使用 babel 來解析支持 es6 和 react 語法。咱們先來一次性安裝這些依賴包：
// npm一次性安裝多個依賴模塊，模塊之間用空格隔開 npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置Babel的方法以下：
module.exports = { entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件 output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "bundle.js"//打包後輸出文件的文件名 }, devtool: 'eval-source-map', devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader", options: { presets: [ "env", "react" ] } }, exclude: /node_modules/ } ] } };
配置完以上選項後就能支持ES6以及JSX的語法了。測試：
npm install --save react react-dom
//Greeter,js import React, {Component} from 'react' import config from './config.json'; class Greeter extends Component{ render() { return ( <div> {config.greetText} </div> ); } } export default Greeter
// main.js import React from 'react'; import {render} from 'react-dom'; import Greeter from './Greeter'; render(<Greeter />, document.getElementById('root'));
直接編譯或者在本地服務器上就能看到運行結果
7.二、.babelrc 文件
Babel其實能夠徹底在 webpack.config.js 中進行配置，可是考慮到babel具備很是多的配置選項，在單一的webpack.config.js文件中進行配置每每使得這個文件顯得太複雜，所以一些開發者支持把babel的配置選項放在一個單獨的名爲 ".babelrc" 的配置文件中。webpack會自動調用.babelrc裏的babel配置選項
module.exports = { entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件 output: { path: __dirname + "/public",//打包後的文件存放的地方 filename: "bundle.js"//打包後輸出文件的文件名 }, devtool: 'eval-source-map', devServer: { contentBase: "./public",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 }, module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ } ] } };
//.babelrc { "presets": ["react", "env"] }
八、CSS module（實現css模塊化）
CSS modules意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，id 名默認都只做用於當前模塊。
Webpack對CSS模塊化提供了很是好的支持，只須要在CSS loader中進行簡單配置便可，而後就能夠直接把CSS的類名傳遞到組件的代碼中，這樣作有效避免了全局污染。具體的代碼以下
module.exports = { ... module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true, // 指定啓用css modules localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式 } } ] } ] } };
由此經過 import 引入的css 文件只會做用於該模塊中，並且只有經過先引入再使用才能起做用，至關於把 css 文件當作了模塊。好比：
建立一個Greeter.css文件來進行一下測試
/* Greeter.css */ .root { background-color: #eee; padding: 10px; border: 3px solid #ccc; }
import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';//導入一個 Greeter.css 樣式，可是不會自動起做用，更不會影響其餘 JS 模塊，只有自動引入再使用才能起做用。
class Greeter extends Component{
render() {
return (
<div className={styles.root}> //使用cssModule添加類名的方法，這裏就是使用引入的 css 文件
{config.greetText}
</div>
);
}
}
export default Greeter
若是沒有使用 CSS Module 的話，在模塊中引入 .css 文件，那麼該 .css 文件將做用於所有模塊而不只僅是引入的模塊（至關於直接在html文件的style標籤中引入了樣式，並且類名沒有更改）
8.一、CSS預處理器
Sass 和 Less 之類的擴展語言是對原生CSS的拓展，它們容許你使用相似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器能夠把這些特殊類型的語句轉化爲瀏覽器可識別的CSS語句。
如下是經常使用的CSS 處理loaders:
Less LoaderSass LoaderStylus Loader
8.二、css處理平臺PostCSS（使css代碼兼容各類瀏覽器）
使用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裏的數據添加不一樣前綴了。
//webpack.config.js module.exports = { ... module: { rules: [ { test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node_modules/ }, { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] } ] } }
// postcss.config.js module.exports = { plugins: [ require('autoprefixer') ] }
九、插件（Plugins）
插件是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。
要使用某個插件，咱們須要經過npm安裝它，而後要作的就是在webpack配置中的plugins關鍵字部分添加該插件的一個實例（plugins是一個數組）
9.一、BannerPlugin插件（添加版權說明）
下面咱們添加了一個給打包後代碼添加版權聲明的插件。該插件是webpack中的內置插件不用安裝。
const webpack = require('webpack');
module.exports = {
...
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('wenxuehai版權全部，翻版必究')
],
};
9.二、HtmlWebpackPlugin插件
這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你全部打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用（好比若是添加了hash值，每次生成的JS文件名稱都不同，若是不使用該模板，那麼每次編譯都須要修改html文件中引入的JS文件名稱）。
npm install --save-dev html-webpack-plugin
這個插件將會自動生成一個新的 HTML 文件並自動引入生成的全部的 JS 文件。示例：
在app目錄下，建立一個index.tmpl.html文件模板，這個模板包含title等必須元素，在編譯過程當中，插件會依據此模板生成最終的html頁面，會自動添加所依賴的 css, js，favicon等文件，index.tmpl.html中的模板源代碼以下：
<!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 + "/app/main.js",//已屢次說起的惟一入口文件
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true//實時刷新
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
})
],
};
再次執行npm start會發如今build文件夾下面生成了bundle.js和index.html。生成的新的 HTML 文件將自動引入全部的資源。
9.三、Hot Module Replacement 插件（熱加載）
Hot Module Replacement（HMR）是webpack裏頗有用的一個插件，它容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。熱加載和webpack-dev-server不一樣，熱替換在應用運行時，無需刷新頁面，便能查看代碼更新後的效果 ，就跟直接在瀏覽器上修改dom樣式同樣，而webpack-dev-server是要刷新頁面的。
（1）在webpack配置文件中添加HMR插件；
（2）在Webpack Dev Server中添加「hot」參數；
不過配置完這些後，JS模塊其實仍是不能自動熱加載的，還須要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載
9.三、react實現熱加載
React模塊可使用Babel實現功能熱加載。Babel有一個叫作react-transform-hrm的插件，能夠在不對React模塊進行額外的配置的前提下讓HMR正常工做；
安裝react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr
const webpack = require('webpack');
module.exports = {
entry: __dirname + "/app/main.js",//已屢次說起的惟一入口文件
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服務器所加載的頁面所在的目錄
historyApiFallback: true,//不跳轉
inline: true,
hot: true
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
]
},
plugins: [
new webpack.BannerPlugin('版權全部，翻版必究'),
new webpack.HotModuleReplacementPlugin() //熱加載插件
],
};
配置Babel
// .babelrc { "presets": ["react", "env"], "env": { "development": { "plugins": [["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react"], "locals": ["module"] }] }]] } } }
//Greeter,js import React, { Component } from 'react' import styles from './main.css' class Greeter extends Component { render() { return ( < div> <h1> aaaf </h1> </div> ); } } export default Greeter
//main.js import React from 'react'; import { render } from 'react-dom'; import Greeter from './greeter.js'; render( < Greeter / > , document.getElementById('root'));
如今若是咱們就能夠實現熱加載模塊了,每次保存就能在瀏覽器上直接看到更新內容，瀏覽器沒必要刷新也不會自動刷新。
（有時候沒有效果多是版本問題）
十、緩存問題（hash）
當咱們使用 webpack 來打包代碼，webpack 會生成一個可部署的文件夾（好比：/dist），而後把打包後的內容放置在此目錄中。只要把 /dist 目錄中的內容部署到服務器上，客戶端（一般是瀏覽器）就可以訪問網站此服務器的網站及其資源。當瀏覽器會使用緩存技術來將文件緩存。當咱們在部署新版本時若是不更改資源的文件名，瀏覽器可能會認爲它沒有被更新，就會使用它的緩存版本。因爲緩存的存在，瀏覽器可能沒法獲取到咱們部署的新版本。
經過使用 [hash] 來使得每次更改代碼以後也能更改掉文件名，能夠確保瀏覽器獲取到修改後的文件。[hash] 替換能夠用於在文件名中包含一個構建相關的 hash，可是更好的方式是使用 [chunkhash] 替換，在文件名中包含一個 chunk 相關的哈希。
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
..
output: {
path: __dirname + "/build",
filename: "[name].hash].js"
},
...
};
[chunkhash] 跟熱替換模塊功能的插件 HotModuleReplacementPlugin 有衝突，要想使用 [chunkhash] 必須把熱替換註釋掉。[chunkhash] 只建議在生產環境中使用。
[hash] 是有一個文件修改那麼全部的文件的hash值都修改。
十一、使用 CommonChunkPlugin 去重代碼
參考：https://www.webpackjs.com/guides/code-splitting/
若是多個入口文件都共同引入了同一個模塊，正常編譯的話webpack會將依賴的模塊編譯進每一個出口文件中，而 CommonsChunkPlugin 插件能夠將多個入口文件共同依賴的公共模塊提取到一個新生成的出口文件中（chunk）。
const path = require('path');
const webpack = require('webpack');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
another: './src/another-module.js'
},
plugins: [
new HTMLWebpackPlugin({
title: 'Code Splitting'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common' //指定公共 bundle 的名稱。
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
如今生成的多個出口文件將減輕了大小。使用 HTMLWebpackPlugin 插件將生成的模塊自動引入 HTML 文件中。
11.一、將第三庫的代碼提取到單獨的出口文件中
代碼中引入的第三方依賴庫（例如 lodash 或 react、vue）它們不多像本地的源代碼那樣頻繁修改。所以將它們提取到一個單獨的出口文件中，而且用固定的一個名字命名，這樣瀏覽器能夠只用緩存的文件，減小請求。
經過指定 entry 配置中一個未用到的名稱，去重插件會自動將咱們指定的第三方庫提取到單獨的包中：
var path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', entry: { main: './src/index.js', vendor: [ 'lodash' ] }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Caching' }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' //指定的第三方庫即上面的 lodash 將自動提取到這裏 }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' //其餘的共用代碼提取到這裏 }) ], output: { filename: '[name].[chunkhash].js', //這個時候用[chunkhash]纔有意義 path: path.resolve(__dirname, 'dist') } };
配合 [chunkhash] 使用，當咱們修改本地代碼時，由第三方庫提取出的文件的文件名並不會改變，所以瀏覽器將會使用緩存的文件，達到了減小請求的功能。
11.二、解決去重代碼出現的問題（模板標識符）
提取出第三庫的文件有可能會由於在模塊中的引用順序發生變化而致使編譯的文件名也發生改變，這顯然不是咱們想要的，由於第三庫並無改變。
可使用兩個插件來解決這個問題。第一個插件是 NamedModulesPlugin將使用模塊的路徑，而不是數字標識符。雖然此插件有助於在開發過程當中輸出結果的可讀性，然而執行時間會長一些，推薦用於開發環境。第二個選擇是使用 HashedModuleIdsPlugin，推薦用於生產環境構建。
只要在webpack的配置文件中添加代碼：
//只要在plugins 中引入插件： //使用HashedModuleIdsPlugin插件 new webpack.HashedModuleIdsPlugin() //使用NamedModulesPlugin插件 new webpack.NamedModulesPlugin()
十二、清理輸出文件夾的文件（CleanWebpackPlugin）
因爲以前的一些編譯可能會致使用於輸出的文件夾中包含了一些不必的文件，顯得比較雜亂，咱們能夠用clean-webpack-plugin 插件清理輸出的文件夾中的文件。
該插件會在每次構建前清理輸出文件夾，只會生成用到的文件。
npm install clean-webpack-plugin --save-dev
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
new CleanWebpackPlugin(['public/*.*'], {
root: __dirname,
verbose: true, //開啓在控制檯輸出信息
dry: false
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
12.一、webpack-dev-server和CleanWebpackPlugin同時使用的問題
有一個問題是當熱加載和CleanWebpackPlugin插件同時使用時，運行dev-sever會從新編譯，由此也從新使用清理插件，目標文件夾中的文件將被所有刪除，可是此時並不生成新的文件。
雖然沒報什麼問題，代碼也能夠跑，可是仍是困惑了我好久。這個問題應該是運行webpack-dev-server時webpack會從新編譯，由此使用了清理插件，可是dev-server並不會在工做目錄中生成編譯的文件，而是在內存中生成，因此看不到，可是代碼跑的沒問題。
要想解決這個問題，我在GitHub上看到了一個issue，可是嘗試了好像會報錯：https://github.com/johnagan/clean-webpack-plugin/issues/96。事後會繼續關注該問題。
- 1. webpack基本使用
- 2. webpack-基本使用
- 3. webpack的基本使用
- 4. Webpack的基本使用
- 5. webpack 的基本使用
- 6. webpack的基本使用2
- 7. webpack的基本使用(1)
- 8. webpack ---->基本使用
- 9. webpack plugin 基本使用
- 10. 前端webpack workflow（二）——Webpack基本使用
- 更多相關文章...
- • Redis基本安裝和使用 - Redis教程
- • Lua 基本語法 - Lua 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. webpack基本使用
- 2. webpack-基本使用
- 3. webpack的基本使用
- 4. Webpack的基本使用
- 5. webpack 的基本使用
- 6. webpack的基本使用2
- 7. webpack的基本使用(1)
- 8. webpack ---->基本使用
- 9. webpack plugin 基本使用
- 10. 前端webpack workflow（二）——Webpack基本使用