webpack4.0 全篇詳解
1、初識webpack
官網圖解:css
1.1 什麼是webpack
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包工具：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並生成一個或多個 bundle，將其打包爲合適的格式以供瀏覽器使用html
webpack構建：前端
構建就是把源代碼轉化成線上瀏覽器可執行的JavaScript、CSS、HTML等代碼
複製代碼
主要有以下7個操做：vue
1.代碼轉換：TypeScript 編譯成 JavaScript、SCSS或Less 編譯成 CSS 等。
2.文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等。
3.代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載。
4.模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件。
5.自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器,nodemon。
6.代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。
7.自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。
複製代碼
如圖示:node
構建實際上是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列的流程。構建給前端開發注入了更大的活力，解放了咱們的生產力,更加方便了咱們的開發。webpack
1.2 什麼是webpack模塊
與 Node.js模塊 相比，webpack _模塊_可以以各類方式表達它們的依賴關係。下面是一些示例:git
- ES2015
import語句 - CommonJS
require()語句 - AMD
define和require語句 - css/sass/less 文件中的
@import語句。 - 樣式(
url(...))或 HTML 文件(<img src=...>)中的圖片連接
經過 loader，webpack 能夠支持以各類語言和預處理器語法編寫的模塊. 詳情查看官網webpack模塊es6
2、webpack項目的基本搭建
2.1 搭建webpack環境
- Node.js安裝 Node官網
Mac OSX系統安裝Node的流程:github
安裝Homebrew：web
Homebrew簡稱brew，是Mac OSX上的軟件包管理工具，能在Mac中方便的安裝軟件或者卸載軟件
打開終端,執行如下命令安裝Homebrew:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
複製代碼
Node安裝：
打開終端,執行如下命令安裝node: brew install node
查看版本,檢查是否安裝成功: node -v npm -v
複製代碼
Cnpm安裝：
因爲npm走的是國外網絡，比較慢容易出現安裝失敗的現象,因此能夠切換成國內的鏡像資源:
cnpm和npm用法一致, 只是使用過的是國內的淘寶鏡像,效率會比npm高不少
打開終端,執行如下命令安裝cnpm:
npm install cnpm -g --registry=https://registry.npm.taobao.org
查看版本,檢查是否安裝成功: cnpm -v
複製代碼
2.2 webpack項目初始化配置
在桌面上新建一個webpack-simple-project. 並使用終端(terminal),在其路徑下新建package.json文件:
1. mkdir webpack-simple-project
2. npm init 或者 cnpm init. // 所有回車點擊
3. npm init -y 或者 cnpm init -y. //-y 會 默認全部的配置
複製代碼
package.json基本結構:
{
"name": "webpack-simple-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
複製代碼
在這個文件中, 咱們能夠在 "scripts" 腳本命令中,來配置咱們經常使用的腳本命令,例如:
{
...
...
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",//npm run build 啓動咱們的webpack,生產環境
"dev": "webpack --mode development",//npm run dev 啓動咱們的webpack,生產環境
},
...
...
}
複製代碼
2.3 安裝webpack
- 全局安裝
通常不建議全局安裝，防止兩個不一樣項目引用了webpack的不一樣版本，就會出現版本不統一運行不起來的狀況，須要卸載掉當前版本安裝對應版本，就會比較麻煩。
npm install webpack webpack-cli -g
或者
cnpm install webpack webpack-cli -g
複製代碼
- 局部項目安裝
npm install webpack webpack-cli --save-dev
或者
cnpm install webpack webpack-cli --save-dev
複製代碼
本項目採用局部安裝，在4.0以後，webpack和webpack-cli已分開，須要單獨安裝
1. cd webpack-simple-project 路徑下
2. npm install webpack webpack-cli --save-dev
3. npx webpack -v //查看版本號
4. npm info webpack //查看對用包的詳細信息
//能夠安裝指定版本包（例子）
npm install webpack@4.16.1 webpack-cli -D
複製代碼
注意:
因爲NPM訪問的是國外鏡像資源，若是出現安裝失敗的狀況，建議更換成國內的鏡像資源cnpm下載安裝。
複製代碼
2.4 webpack的配置文件
webpack 開箱即用，能夠無需使用任何配置文件。 然而，webpack 會假定項目的入口起點爲 src/index ，而後會在 dist/main.js 輸出結果，而且在生產環境開啓壓縮和優化。 一般，你的項目還須要繼續擴展此能力，爲此你能夠在項目根目錄下建立一個 webpack.config.js 文件，webpack 會自動使用它。
在項目根目錄下新建 webpack.config.js 文件，這是webpack默認配置文件，詳情請看 官網配置
const path = require('path'); //引入咱們的node模塊的path
module.export = {
//默認是production，打包的文件默認被壓縮。開發時能夠設置爲development，不被壓縮
mode:'production',
//打包項目的入口文件
entry:'./src/app.js',
//打包項目的輸出文件
output:{
//自定義打包輸出文件名
filename:'js/[name].js', //文件名默認[name].js, 能夠在前面加上相對路徑,生成包裹js文件的文件夾
//輸出文件的絕對路徑
path:path.resolve(__dirname,'dist'), //定位,輸出文件的目標路徑
//輸出文件的公共路徑
publicPath:'http://cdn.com/',//公共路徑,能夠理解爲絕對地址(域名)
},
...
...
}
複製代碼
2.5 項目文件引入並開始打包
在webpac-simple-project項目中,咱們的文件結構樹以下:
開始對js文件的引入: 在index.html中，引入打包好的文件路徑 dist/index.js
<!DOCTYPE html>
<html>
<head>
<title>webpack simple project</title>
</head>
<body>
<!-- 該路徑爲項目打包好的文件路徑,可使用html-webpack-plugin寫入這個script的引入-->
<script src="dist/index.js"></script>
</body>
</html>
複製代碼
開始對項目開始打包構建，打開terminal 定位到項目的根目錄路徑下，執行npm命令
1. cd webpack simple project目錄下
2. npm run build
複製代碼
輸出內容以下:
3、webpack的核心概念 - Loader篇
3.1 什麼是loader
webpack可使用loader 來預處理那些非 JavaScript 文件，就是經過使用不一樣的Loader，webpack能夠把不一樣的靜態文件都編譯成js文件，好比css,sass,less,ES6/7,vue,JSX等
複製代碼
loader概念圖解: 官網loader
loader 支持串聯的方式多個loader使用,在node的環境下也能夠運行,支持同步和異步. 多loader使用時,要注意前後順序,從右往左開始編譯執行的.
3.2 使用Loader打包處理JS文件
- babel-loader的使用
做用: babel-loader的做用正是實現對使用了ES2015+語法的.js文件進行處理.
- 命令:
npm/cnpm install babel-loader --save-dev
複製代碼
- babel-core的安裝:它的做用在於提供一系列api。這即是說，當webpack使用babel-loader處理文件時，babel-loader實際上調用了babel-core的api
npm/cnpm install babel-core --save-dev
複製代碼
- babel-preset-env的安裝:它的做用在於告訴babel使用哪一種轉碼規則進行文件處理
npm/cnpm install babel-preset-env --save-dev
複製代碼
babel的配置方式
- 第一種方式是經過package.json。在package.json文件中增長一個「babel"屬性，該屬性是一個JSON對象，做用是設置項目中的babel轉碼規則和使用到的babel插件:
{
...
"babel":{
"presets": [],
"plugins": []
}
...
}
複製代碼
- 經過.babelrc文件, 在根目錄下新建.babelrc文件, 裏面默認輸入「babel」的屬性的值便可:
xxx.babelrc:
{
"presets": ["env"],
"plugins": []
}
複製代碼
在 webpack.config.js 裏 添加loader配置
const path = require('path');//物理路徑
//__dirname,當前運行環境下的變量,也就是當前環境下的絕對路徑,後面會跟着一個相對路徑
{
...
module:{
rules:[
{
test:/\.js$/,
include:path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname,"node_modules"), // /node_modules/, //指定排除處理的範圍文件,提升打包的速度,能夠是正則表達式,還有絕對路徑
loader: "babel-loader"
}
]
}
...
}
複製代碼
項目文件的引入並打包
在src目錄下，存在app.js 和 a.js 文件, 代碼引入以下:
a.js文件代碼:
function arrowToast (){
alert([1,2,3].map(n => n + 1)); //等同於alert([1,2,3].map(function(n){return n+1}))
}
module.exports = {
arrowToast:arrowToast
}
複製代碼
app.js文件代碼:
var a = require('./a.js')
function helloWorld (str){
alert(str)
}
helloWorld("helloWorld");
a.arrowToast();
複製代碼
開始對項目開始打包構建，打開terminal 定位到項目的根目錄路徑下，執行npm命令
terminal 定位到根目錄下 運行 npm run build
複製代碼
打開咱們的dist文件下的index.html, 在瀏覽器運行, 能夠看到咱們的頁面效果會執行兩個彈窗事件
第一次是「helloWorld」, 第二次是a.js中的es6方法函數結果 ""2,3,4""
複製代碼
常見錯誤:
若是出現下面的打包錯誤:
Error: Cannot find module '@babel/core'
那是由於babel-loader的版本太高, 找不到babel-core. 二者之間不匹配, 這個時候的辦法, 是先從新安裝babel-loader,回退版本到7.0多
「cnpm install babel-loader@7.1.5 --save-dev」
複製代碼
這樣對於babel-loader的配置,也基本成功完成了.
3.3 使用Loader打包處理靜態文件
3.3.1 支持加載樣式CSS文件
- style-loader的使用
做用: 可以在須要載入的html中建立一個標籤,style-loader加載到的css樣式動態的添加該標籤中.
命令:
npm/cnpm install style-loader --save-dev
複製代碼
- css-loader的使用
做用: 容許在js中import一個css文件，會將css文件當成一個模塊引入到js文件中. 只會加載引入到js文件中的css文件.
命令:
npm/cnpm install css-loader --save-dev
複製代碼
項目文件的引入並打包
在src目錄下，會有一個style文件和app.js,style下包含一個app.css文件 ,代碼以下：
app.js文件代碼:
import "./style/app.css"; //對css文件進行引入
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.css$/, //匹配以css爲後綴的文件
use: ['style-loader', 'css-loader'],//loader的執行順序是從右向左，從下到上。css-loader：分析幾個css文件之間的關係，最終合併爲一個css。style-loader:在獲得css生成的內容時，把其掛載到html的head裏，成爲內聯樣式。
},
],
},
};
複製代碼
3.3.2 支持加載樣式SASS文件
- sass-loader的使用
做用: 對項目中的scss文件進行處理
命令:
npm/cnpm install scss-loader --save-dev (node-sass可不安裝)
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 將 JS 字符串生成爲 style 節點
"css-loader", // 將 CSS 轉化成 CommonJS 模塊
"sass-loader" // 將 Sass 編譯成 CSS，默認使用 Node Sass
]
}]
}
};
複製代碼
3.3.3 支持加載樣式less文件
- less-loader的使用
做用: 對項目中的less文件進行處理
命令:
cnpm install less --save-dev
npm/cnpm install less-loader --save-dev
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 將 JS 字符串生成爲 style 節點
"css-loader", // 將 CSS 轉化成 CommonJS 模塊
"sass-loader", // 將 Sass 編譯成 CSS，默認使用 Node Sass
"less-loader"
]
}]
}
};
複製代碼
3.3.4 爲 css 樣式屬性加不一樣瀏覽器的前綴件
爲了瀏覽器的兼容性，在不一樣的瀏覽器中，使用個別樣式時必須加入-webkit,-ms,-o,-moz這些前綴
瀏覽器內核:
1. Trident內核：主要表明爲IE瀏覽器, 前綴爲-ms
2. Gecko內核：主要表明爲Firefox, 前綴爲-moz
3. Presto內核：主要表明爲Opera, 前綴爲-o
4. Webkit內核：產要表明爲Chrome和Safari, 前綴爲-webkit
複製代碼
- postcss-loader的使用
做用: 其主要是對css文件的預處理,autoprefixer是它的一個插件,主要是對css文件添加兼容性前綴
命令:
npm/cnpm install postcss-loader --save-dev
cnpm install autoprefixer --save-dev. //屬於postcss的插件
複製代碼
項目中對autoprefixer的配置
- 第一種方式是經過 postcss.config.js。在項目根目錄下建立 postcss.config.js文件，代碼以下:
module.exports = {
plugins: [
require('autoprefixer')
]
}
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 將 JS 字符串生成爲 style 節點
"css-loader", // 將 CSS 轉化成 CommonJS 模塊
"sass-loader", // 將 Sass 編譯成 CSS，默認使用 Node Sass
"less-loader"
"postcss-loader"
]
}]
}
};
複製代碼
- 第二種方式是直接在webpack.config.js文件配置對loader的特別支持
在 webpack.config.js 裏 添加loader配置
module.exports = {
...
module: {
test:/\.(sc|le|c)ss$/, // 項目中若是有多個ss文件結尾時,正則表達式能夠這麼使用,最新執行的再前面
use:[{
loader:'style-loader'
},{
loader:'css-loader',
options:{
importLoaders:1， ////若是sass文件裏還引入了另一個sass文件，另外一個文件還會從postcss-loader向上解析。若是不加，就直接從css-loader開始解析。
modules: true //開啓css的模塊打包。css樣式不會和其餘模塊發生耦合和衝突
}
},{
loader:"less-loader"
},{
loader:"sass-loader"
},{
loader:'postcss-loader', //autoprefixer使用該插件爲各瀏覽器支持的屬性加上前綴
options:{
plugins:[require("autoprefixer")("last 5 versions")]
}
},
],
include:path.resolve(__dirname, 'src'),
},
};
複製代碼
3.3.5 支持加載圖片文件
- file-loader的使用
做用: 對項目中引入的資源文件(圖片)進行處理，解決CSS等文件中的引入圖片路徑問題。 詳細請看官方文檔：官網: file-loader
命令:
npm/cnpm install file-loader --save-dev
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
//配置模塊,主要用來配置不一樣文件的加載器
module: {
//配置模塊規則
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/, //正則匹配要使用相應loader的文件
use: [
{
loader: 'file-loader', //要用到的loader
options: {
//palceholder佔位符
name:'[name].[ext]', //打包後的圖片名字，後綴和打包的以前的圖片同樣
outputPath: 'images/' //圖片打包後的地址
},
},
],
},
],
},
};
複製代碼
- url-loader的使用
做用: 將小圖片轉換成base64格式。 已經具有了file-loader的功能,使用時,能夠不引用file-loader. 可是url-loader能夠將圖片轉成base64字符,能更快的加載圖片,一旦圖片過大,就會使用file-loader的加載本地圖片。詳細請看官方文檔：官網: url-loader
命令:
npm/cnpm install url-loader --save-dev
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|bmp/)$/i,
use: [
{
loader: 'url-loader',
options: {
name:'[name].[ext]',
outputPath: 'images/',
limit: 8192 //小於8192b,就能夠轉化成base64格式。大於就會打包成文件格式
}
}
]
}
]
}
}
複製代碼
file-loader和url-loader使用注意:
1. 在css文件中對圖片資源文件的引入可使用相對路徑:
app.css文件中:
.imgClass{
width:400px;
height: 400px;
background: url('../assets/test.jpg');
}
.imgSize{
width:400px;
height: 400px;
}
2. 在html中若是使用img標籤的src 對圖片進行使用,須要「使用絕對路徑」. 若是要使用相對路徑,則須要以下:
<div class="imgClass"></div>
<img class="imgSize" src="${require('./src/assets/bg.jpg')}"/>
複製代碼
- image-webpack-loader
做用:對引入項目中的圖片文件進行壓縮處理
命令:
npm/cnpm install image-webpack-loader --save-dev
複製代碼
在 webpack.config.js 裏 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|bmp/)$/i,
use: [
{
loader: 'url-loader',
options: {
name:'[name].[ext]',
outputPath: 'images/',
limit: 8192 //小於8192b,就能夠轉化成base64格式。大於就會打包成文件格式
}
},
{
loader:'image-webpack-loader', //對圖片資源進行壓縮處理
}
]
}
]
}
}
複製代碼
3.4 使用Loader打包處理HTML文件
- html-loader
做用: 對項目中引入的模版html文件進行處理(必須在js文件中引入)
命令:
npm/cnpm install html-loader --save-dev
複製代碼
項目文件的引入並打包
在webpac-simple-project項目中,咱們的文件結構樹以下:
在src目錄下，存在components文件夾 和 app.js 文件, 代碼引入以下:
components文件夾下的layer.js文件代碼:
//ES6語法
import template from './layer.html'
import "./layer.css";
// import "./layer.less";
function layer (){
return{
name:"layer",
tpl:template
}
}
//導出
export default layer;
複製代碼
components文件夾下的layer.html文件代碼:
<div class="layer">
<div>this is a layer</div>
</div>
複製代碼
app.js對layer模板的引入:
// ES6語法
import Layer from './components/layer/layer.js'
const App = function (){
var dom = document.getElementById('app');
dom.innerHTML = new Layer().tpl;
console.log(dom);
console.log(Layer);
}
new App();
複製代碼
根目錄下運行:
npm run build 打包以後, 咱們能夠在dist/index.html 瀏覽器運行以後,能夠成功看到layer模版已經寫入id爲app的標籤下
複製代碼
3.5 完整的webpack.config.js 對loader的支持
const path = require('path');//
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:"./src/app.js",
output:{
filename:"js/[name].js",
path:path.resolve(__dirname,'dist') //__dirname,當前運行環境下的變量,也就是當前環境下的絕對路徑,後面會跟着一個相對路徑
},
plugins:[
new htmlWebpackPlugin({
template:'index.html',
filename:'index.html',
inject:true
})],
module:{ //loader使用方法
rules:[
{
test:/\.js$/,
include:path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname,"node_modules"), // /node_modules/,
//指定排除處理的範圍文件,提升打包的速度,能夠是正則表達式,還有絕對路徑
loader: "babel-loader"
},{
test:/\.html$/, //使用html-loader對html模版內容進行引入.
// include:path.resolve(__dirname, 'src'),
loader: "html-loader"
},{
test:/\.(png|svg|jpg|jpeg|gif)$/i, //使用file-loader對資源文件的引入,i不區分大小寫
include:path.resolve(__dirname, 'src'),
use: [
// {
// loader:'file-loader',
// options:{
// name:'assets/[name]-[hash:5].[ext]', //設置資源圖片打包後的地址
// }
// },
{
loader:'url-loader',
options:{
limit:20000, //限制圖片的最大字節
name:'assets/[name]-[hash:5].[ext]', //設置資源圖片打包後的地址
}
},
{
loader:'image-webpack-loader', //對圖片資源進行壓縮處理
}
]
},{
test:/\.(sc|le|c)ss$/, // 項目中若是有多個ss文件結尾時,正則表達式能夠這麼使用,最新執行的再前面
// loader:'style-loader!css-loader!less-loader' 沒有postcss-loader能夠直接這樣使用
use:[{
loader:'style-loader'
},{
loader:'css-loader',
options:{
importLoaders:1
}
},{
loader:"less-loader"
},{
loader:"sass-loader"
},{
loader:'postcss-loader', //autoprefixer使用該插件爲各瀏覽器支持的屬性加上前綴
options:{plugins:[require("autoprefixer")("last 5 versions")]}
},
],
include:path.resolve(__dirname, 'src'),
},
]
}
}
複製代碼
項目結構圖
Github地址:webpack-loader
4、webpack的核心概念 - Plugin篇
4.1 什麼是plugin
plugin是webpack的支柱, 主要是爲了解決loader沒法實現的其餘事情.想要使用一個插件，你只須要 require() 它，而後把它添加到 plugins 數組中。
多數插件能夠經過選項(option)自定義,你也能夠在一個配置文件中由於不一樣目的而屢次使用同一個插件，這時須要經過使用 new 操做符來建立它的一個實例
複製代碼
常見plugin概念圖解: 官網plugin
4.2 經常使用的plugin插件
- html-webpack-plugin
做用: 打包項目中的html文件, 並生成對應打包的html文件.
命令:
npm/cnpm install html-webpack-plugin --save-dev
複製代碼
介紹:
1.file: 指定生成的文件
2.filename: 指定生成的文件名稱, 優先級比file高, 二者取一便可
3.template: 須要被打包的html文件路徑
4.inject: 主要是指定引入的js文件寫入到html文件的位置.
主要有true(默認值,body底部)、body(body底部)、head(html標籤的head)、false(不寫入生成的js文件,基本不會用)
5.minify對象:主要是對html文件進行壓縮,可去npm官網(https://www.npmjs.com/package/html-webpack-plugin)查看對應的屬性配置
6.chunks:指定哪些須要被引入打包的模塊
7.excludeChunks:指定哪些不須要被引入打包的模塊,而其餘的chunks將會被引入. 且與優先級高於chunks,
也就是說當二者同時存在時,excludeChunks若是包含chunks中的chunk,則該chunk也不會被引入
複製代碼
在 webpack.config.js 裏 添加plugin配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html文件
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), //定位,輸出文件的目標路徑
filename: 'js/[name].js',//文件名默認[name].js,
},
// webpack 中對於plugin的學習
plugins: [ //數組, 支持生成多頁面的html文件
new HtmlWebpackPlugin({ //將模板的頭部和尾部添加css和js模板,dist 目錄發佈到服務器上，項目包。能夠直接上線
file: 'app.html', //指定要生成的文件
filename: 'app.html', //指定要生成的文件名稱,優先級比file高, 二者指定一個就能夠,加上hash會每次生成不一樣的html文件
template: 'index.html', //須要被打包的模版html
inject: 'body', //指定腳本插入的標籤位置, 能夠是head,body等標籤
title: 'webpack is good',
minify: { //對html文件進行壓縮
removeComments: true, //刪除打包的文件內部代碼註釋
collapseWhitespace: true, //刪除空格
},
}),
],
...
}
複製代碼
- clean-webpack-plugin
做用: 自動清除上一次打包的dist文件
命令:
npm/cnpm install clean-webpack-plugin --save-dev
複製代碼
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js',//文件名默認[name].js,
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html' //在打包以後，以.html爲模板，把打包生成的js自動引入到這個html文件中
}),
new CleanWebpackPlugin(['dist']), // 在打包以前，能夠刪除dist文件夾下的全部內容
]
};
複製代碼
- source-map
做用: 打包編譯後的文件和源文件的映射關係，用於開發者調試用。
命令:
npm/cnpm install clean-webpack-plugin --save-dev
複製代碼
source-map 把映射文件生成到單獨的文件，最完整但最慢
cheap-module-source-map 在一個單獨的文件中產生一個不帶列映射的Map
eval-source-map 使用eval打包源文件模塊,在同一個文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包後的JS同行顯示，沒有映射列
development環境推薦使用： devtool: 'cheap-module-eval-source-map',
production環境推薦使用： devtool: 'cheap-module-source-map',
複製代碼
- webpack-dev-server
做用: 解決每次在src裏編寫完代碼都須要手動從新運行 npm run dev
命令:
npm install webpack-dev-server --save-dev
複製代碼
介紹:
1. contentBase :配置開發服務運行時的文件根目錄
2. open :自動打開瀏覽器
3. host：開發服務器監聽的主機地址
4. compress :開發服務器是否啓動gzip等壓縮
5. port：開發服務器監聽的端口
複製代碼
解決每次在src裏編寫完代碼都須要手動從新運行 npm run dev，在 package.json 裏添加配置
{
"name": "haiyang",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"watch": "webpack --watch",// 加--watch自動監聽代碼的變化
},
}
複製代碼
在 webpack.config.js 裏 添加plugin配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js'
},
+ devServer: {
contentBase: './dist',
open: true,
port: 8080,
proxy: {//配置跨域，訪問的域名會被代理到本地的3000端口
'/api': 'http://localhost:3000'
}
},
module: {
rules: []
},
plugins: [],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
複製代碼
在 package.json 中 添加熱更新
{
"name": "haiyang",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"watch": "webpack --watch",// 加--watch自動監聽代碼的變化
"start": "webpack-dev-server",//配置熱更新
},
}
複製代碼
4.3 plugin對多頁面項目的配置支持
在 webpack.config.js 裏 添加plugin配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html文件
module.exports = {
//context:'' //整個環境的上下文, 也就是項目根目錄
entry: { //入口文件, 在vue-cli中是main.js
main: './src/index.js',
app: './src/app.js',
home: './src/home.js',
mine: './src/mine.js',
},
output: { //webpack如何向外輸出
path: path.resolve(__dirname, 'dist'), //定位,輸出文件的目標路徑
filename: 'js/[name].js',//文件名默認[name].js, 能夠在前面加上相對路徑,生成包裹js文件的文件夾
//也可用hash chunkhash結合配置. [name]-[hash].js [name]-[chunkhash].js.
//使用chunkhash,在打包的時候,若是文件無修改,則不會在打包. 等同於版本號,使用用於多頁面
publicPath: 'http://cdn.com/' //公共路徑, 能夠理解爲絕對地址(域名), 設置publicpath,在打包輸出的時候,
//在html中引入的路徑會以publicPath+path+filename.js這兩個路徑拼接後的文件名稱引入
},
// webpack 中對於plugin的學習
plugins: [ //數組, 支持生成多頁面的html文件
new HtmlWebpackPlugin({ //將模板的頭部和尾部添加css和js模板,dist 目錄發佈到服務器上，項目包。能夠直接上線
file: 'app.html', //指定要生成的文件
filename: 'app.html', //指定要生成的文件名稱,優先級比file高, 二者指定一個就能夠,加上hash會每次生成不一樣的html文件
template: 'index.html', //須要被打包的模版html
inject: 'body', //指定腳本插入的標籤位置, 能夠是head,body等標籤
title: 'webpack is good',
minify: { //對html文件進行壓縮
removeComments: true, //刪除打包的文件內部代碼註釋
collapseWhitespace: true, //刪除空格
},
chunks: ['main', 'app']
}),
new HtmlWebpackPlugin({ //home頁面
filename: 'home.html',
template: 'home.html',
inject: true,
chunks: ['main', 'home'] //chunks屬性,指定每個模版要引入的chunk(js文件),並且是做爲數組存在,其內部對象爲要引入的chunk名稱.
}),
new HtmlWebpackPlugin({ //mine頁面
filename: 'mine.html',
template: 'mine.html',
inject: true,
//chunks:['main','home'], excludeChunks和chunks最好二者取其一,互不包含
excludeChunks: ['home', 'app'], //指定哪些不被引入的chunk(js文件),而剩下的其餘chunk,將在該模版進行引入, 它和chunks屬性對立,
//且與優先級高於chunks,也就是說當二者同時存在時,excludeChunks若是包含chunks中的chunk,則該chunk也不會被引入
})
],
...
}
複製代碼
Github地址:webpack-simple-project
相關文章
- 1. webpack4.0基礎篇
- 2. webpack4.0搭建vue腳手架詳解
- 3. 10天完全搞定-webpack4.0
- 4. webpack4.0
- 5. webpack4.0 CheatSheet
- 6. Git使用詳細篇（全解）
- 7. 一篇Mysql注入最全詳解（2）
- 8. Webpack4.0各個擊破（5）module篇
- 9. Webpack4.0各個擊破（10）integration篇
- 10. webpack4.0各個擊破（7）—— plugin篇
- 更多相關文章...
- • 免費ARP詳解 - TCP/IP教程
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • Flink 數據傳輸及反壓詳解
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
