webpack入門看他就夠了！！
寫在前面的話
前幾年入門webpack是在segmentFault上看到的一篇很好的文章，連接在這裏，有興趣的同窗能夠去看看，不過如今到4.x的版本了，好多東西不適用，就想本身再總結一下，一樣，若是你對webpack不少基礎的東西都很明白的話，這篇文章可能對你沒有什麼價值，若是你對webpack的一些概念仍是很模糊，相信跟着這篇文章敲下來應該會有更清晰的認識。css
什麼是webpack
官網的定義是：html
本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle前端
通俗的點來講，webpack就是一個打包器，將你的項目視爲一個總體，經過給定的一個或多個入口，找到項目中全部的依賴文件，使用loaders來處理他們，把你項目裏的代碼（.ts, .scss .less .jsx等文件）打包翻譯成瀏覽器能夠識別的代碼，這樣咱們只須要專一於開發就能夠了。node
webpack的使用
初步瞭解webpack後，咱們下面開始使用webpackreact
安裝webpack
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
- index.html // 放在public下
- Greeter.js // 放在src下
- main.js // 放在src下
目錄結構以下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
調出終端在當前項目目錄下：
webpack {enterFile} -o {outputFile} // enterFile 要打包的文件 outputFile打包後的文件
複製代碼
對於本例來講就是：
webpack src/main.js -o public/bundle.js
複製代碼
會看到以下結果：
經過配置使用webpack
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
Loaders能夠說是webpack強大的核心功能之一了，它提供了調用外部腳本的能力，實現對不一樣格式的代碼進行編譯處理，處理成瀏覽器能夠識別的JS，CSS等。好比ts-loader能夠將咱們編寫的.ts文件編譯打包成.js文件，less-loader能夠將.less文件預編譯成.css文件,"react-loader"能夠將.jsx編譯成.js文件等等，下面介紹一些經常使用的loader。
Loaders須要單獨安裝而且須要在webpack.config.js中的modules關鍵字下進行配置，Loaders的配置包括如下幾方面：
- test 用來匹配loaders所處理文件的拓展名的正則表達式（必須），告訴某個loader處理匹配上的哪些文件
- loader 指定匹配上的文件用什麼loader來處理他們（必須）
- include/exclude 手動添加必須處理的文件（文件夾）或屏蔽不須要處理的文件（文件夾）（可選）；
- query：爲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
Babel實際上是一個編譯JavaScript的平臺，它能夠編譯代碼幫你達到如下目的：
- 讓你能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持；
- 讓你能使用基於JavaScript進行了拓展的語言，好比React的JSX；
Babel的安裝與配置
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的配置
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均可以被處理。
CSS
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模塊實踐
css Module
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
複製代碼
結果相同的類名也不會形成不一樣組件之間的污染。
CSS預處理器
Sass 和 Less 之類的預處理器是對原生CSS的拓展，它們容許你使用相似於variables, nesting, mixins, inheritance等不存在於CSS中的特性來寫CSS，CSS預處理器能夠這些特殊類型的語句轉化爲瀏覽器可識別的CSS語句，
你如今可能都已經熟悉了，在webpack裏使用相關loaders進行配置就可使用了，如下是經常使用的CSS 處理loaders:
- Less Loader
- Sass Loader
- Stylus Loader
不過其實也存在一個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文件頭就會有以下效果:
HtmlWebpackPlugin
這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html。這在每次生成的js文件名稱不一樣時很是有用（好比添加了hash值）。 安裝：
npm install --save-dev html-webpack-plugin
複製代碼
這個插件自動完成了咱們以前手動作的一些事情，在正式使用以前須要對一直以來的項目結構作一些更改：
- 移除public文件夾，利用此插件，index.html文件會自動生成，此外CSS已經經過前面的操做打包到JS中了。
- 在src目錄下，建立一個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 + "/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
Hot Module Replacement（HMR）也是webpack裏頗有用的一個插件，它容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。
在webpack中實現HMR也很簡單，只須要作兩項配置:
- 在webpack配置文件中添加HMR插件；
- 在Webpack Dev Server中添加「hot」參數；
不過配置完這些後，JS模塊其實仍是不能自動熱加載的，還須要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載，雖然這個API不難使用，可是若是是React模塊，使用咱們已經熟悉的Babel能夠更方便的實現功能熱加載。
整理下咱們的思路，具體實現方法以下:
- Babel和webpack是獨立的工具
- 兩者能夠一塊兒工做
- 兩者均可以經過插件拓展功能
- HMR是一個webpack插件，它讓你能瀏覽器中實時觀察模塊修改後的效果，可是若是你想讓它工做，須要對模塊進行額外的配額；
- Babel有一個叫作react-transform-hrm的插件，能夠在不對React模塊進行額外的配置的前提下讓HMR正常工做；
仍是繼續上例來實際看看如何配置
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安裝，經過如下插件能夠完成產品發佈階段所需的功能
- OccurenceOrderPlugin :爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
- UglifyJsPlugin：壓縮JS代碼；
- ExtractTextPlugin：分離CSS和JS文件
咱們繼續用例子來看看如何添加它們，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"
},
...
};
複製代碼
如今用戶會有合理的緩存了。
去除build文件中的殘餘文件
引入clean-webpack-plugin插件後在配置文件的plugins中作相應配置便可：
安裝：
npm install clean-webpack-plugin --save-dev
複製代碼
配置：
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
plugins: [
...// 這裏是以前配置的其它各類插件
new CleanWebpackPlugin()
]
複製代碼
關於clean-webpack-plugin的詳細使用可參考這裏
最後
這是一篇好長的文章，謝謝你的耐心，能仔細看到了這裏