- 現(xiàn)在我們試一下多頁面配置
- 我們在src下建立兩個js裂七。分別為index.js ，a.js 里面只console.log一句話铸题。然后我們在webpack.config.js中配置
let path = require('path')
module.exports={
mode: 'production',
entry:{
home: './src/index.js',
other: './src/a.js'
},
output:{
filename: '[name].js', // 打包出對應(yīng)的名字
path: path.resolve(__dirname, 'dist')
}
}
-
然后我們 npm run build 打包祝迂，可以 看到打包出來對應(yīng)的兩個js
image.png
- 現(xiàn)在只是有js。我們還需要頁面铁材。我們用前面了解的html-webpack-plugin
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
mode: 'production',
entry:{
home: './src/index.js',
other: './src/a.js'
},
output:{
filename: '[name].js', // 打包出對應(yīng)的名字
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html',
filename: 'home.html', // 不能用[name].html，需要用兩次
chunks: ['home'] // chunks 只打包home對應(yīng)的js
})
new HtmlWebpackPlugin({
template: './index.html',
filename: 'other.html',
chunks: ['other']
})
]
}
-
npm run build打包看結(jié)果,生成的html文件達到了多頁面效果
image.png
- 接下來我們說一下source-map. 主要在webpack.config.js中配置說明一下奕锌。
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
mode: 'development',
entry:{
home: './src/index.js'
},
output:{
filename: '[name].js', // 打包出對應(yīng)的名字
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html',
chunks: ['home']
}),
],
devServer:{
port: 3333,
open: true
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
}
}
]
}
}
- 然后我們在index.js 中故意把console.log寫錯著觉。npm run serve啟動服務(wù)
index.js
console.log('我是index.js')
class A{
constructor(){
console.lo('wo shi a')
}
}
let a = new A();
image.png
-
然后我們點擊錯誤提示，可以跳轉(zhuǎn)到對應(yīng)出錯的地方
image.png 我們可以配置多種soucemap文件
devtool: 'source-map', // 會打包出map文件惊暴，會指向出錯的行列饼丘， 大而全
image.png
-
我們運行打包后的index.html 頁面會提示具體出錯的原文件位置
image.png
devtool: 'eval-source-map', // 不會產(chǎn)生map文件，也會顯示行列
image.png
- 運行html文件點擊控制臺錯誤也會跳轉(zhuǎn)到出錯原文件位置
devtool: 'cheap-module-source-map', // 產(chǎn)生map文件辽话，沒有調(diào)試功能
image.png
4)devtool: 'cheap-module-eval-source-map', //不會產(chǎn)生map文件葬毫，不會產(chǎn)生列信息
image.png
- 控制臺報錯可以定位到原文件出錯的行，但是列不行
- 隨著項目大了屡穗，后端與前端聯(lián)調(diào)贴捡，我們不需要每一次都去打包，這樣特別麻煩村砂，我們希望的場景是烂斋，每次按保存鍵，webpack自動為我們打包础废，這個工具就是watch汛骂！
- 因為watch是webpack自帶的插件，所以我們只需要配置就行了
image.png
- 現(xiàn)在我們只要一修改代碼就會自動打包了评腺，我們在運行打包后的index.html帘瞭，也可以實時的看到效果。
-
但是還是有點問題蒿讥。 如果我們保存的很快蝶念，大會打包多次，沒有必要芋绸，這時我們就需要配置一下watchOptions
image.png
- 現(xiàn)在我們在了解兩個插件 分別 是copyWebpackPlugin(把文件拷貝到打包文件下媒殉，比如文檔等)， bannerPlugin（webpack內(nèi)置的插件摔敛，用于版權(quán)說明）
首先我們按照
cnpm i copy-webpack-plugin --save-dev-
webpack.config.js如下配置廷蓉。打包之后可以看到txt文件原封不動的拷貝到了dist/doc/目錄下；
image.png -
版權(quán)聲明插件由于是內(nèi)置的不用按照額外的插件马昙，我們直接引入webpck. 然后new webpack.BannerPlugin('我是版權(quán)聲明')
image.png 可以看到打包后的js文件前面都出現(xiàn)了聲明的版權(quán)內(nèi)容
