Vuejs學習筆記(三)-7.webpack配置plugin
阿新 • • 發佈：2021-07-05
webpack的外掛使用。
一、配置版權
1.webpack.config.js中引用webpack,
const webpack = require('webpack')
2.plugins中配置版權
new webpack.BannerPlugin('最終版權歸invoker所有')
3.程式碼如下：
1 const path = require('path') 2 const webpack = require('webpack') 3 4 module.exports = { 5 entry: './src/main.js', 6 output: { 7 path: path.resolve(__dirname, 'dist'),8 filename: 'bundle.js', 9 // publicPath: 'dist/' 10 }, 11 module: { 12 rules: [ 13 { 14 test: /\.css$/i, 15 use: ['style-loader', 'css-loader'] 16 }, 17 { 18 test: /\.less$/i, 19 loader: [ 20 "style-loader", 21 "css-loader",22 "less-loader" 23 ] 24 }, 25 { 26 test: /\.(png|jpg|jpeg|gif)$/i, 27 use: [ 28 { 29 loader: 'url-loader', 30 options: { 31 //載入圖片小於limit時，會將圖片編輯成base64字串形式 32 // 載入圖片大於limit時，需要使用file-loader模組進行載入 33limit: 81920, 34 name: 'img/[name].[hash:8].[ext]' 35 } 36 } 37 ] 38 }, 39 { 40 test: /\.js$/i, 41 exclude: /(node_modules|bower_components)/, 42 use: { 43 loader: 'babel-loader', 44 options: { 45 presets: ['es2015'] 46 } 47 } 48 }, 49 { 50 test:/\.vue$/i, 51 use:['vue-loader'] 52 } 53 ] 54 }, 55 resolve:{ 56 alias:{ 57 'vue$':'vue/dist/vue.esm.js' 58 }, 59 extensions:['.js','.css','.less','.vue'] 60 }, 61 plugins:[ 62 new webpack.BannerPlugin('最終版權歸invoker所有') 63 ] 64 65 }
4.檢查打包檔案中會有版權資訊。
二、HtmlWebpackPlugin外掛
HtmlWebpackPlugin外掛
原因：真實專案釋出只有dist資料夾，因此得想辦法將index.html打包到dist中
作用：1.生成一個index.html檔案（可以指定魔板) 2.將打包的js檔案，自動通過script標籤插入到Body中
13.1 npm install [email protected] --save-dev
13.2 修改webpack.config.js中plugins部分
程式碼如下：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/i,
loader: [
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
//載入圖片小於limit時，會將圖片編輯成base64字串形式
// 載入圖片大於limit時，需要使用file-loader模組進行載入
limit: 81920,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/i,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/i,
use:['vue-loader']
}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
},
extensions:['.js','.css','.less','.vue']
},
plugins:[
new webpack.BannerPlugin('最終版權歸invoker所有'),
new HtmlWebpackPlugin({
template:'index.html'
}
),
],
}
13.3 npm run build,則在dist下生成index.html檔案,內有script，但是沒有div模板
13.4 註釋掉webpack.config.js中的output publicPath
13.5 指定模板index.html
13.6 註釋掉模板中的script
三、js程式碼醜化外掛
3.1 npm install [email protected] --save-dev
3.2 在webpack.config.js的plugins中新增這個外掛的例項
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/i,
loader: [
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
//載入圖片小於limit時，會將圖片編輯成base64字串形式
// 載入圖片大於limit時，需要使用file-loader模組進行載入
limit: 81920,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/i,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/i,
use:['vue-loader']
}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
},
extensions:['.js','.css','.less','.vue']
},
plugins:[
new webpack.BannerPlugin('最終版權歸invoker所有'),
new HtmlWebpackPlugin({
template:'index.html'
}
),
new uglifyJsPlugin()
],
}
四、搭建本地伺服器
背景：之前的程式碼每次修改完後，都需要重新編譯，很麻煩，可以通過搭建本地伺服器的方式避免每次都要重新編譯。
原理：搭建一個基於Node.js的伺服器，使用的是express框架。可以服務於指定資料夾，比如：dist資料夾，監聽src中的程式碼有沒有改變，如果有改變，則重新編譯src程式碼，但是不會在dist下重新生成新的檔案，而是把編譯的內容放置在記憶體中，只有執行了npm run build才會把記憶體中的內容寫入磁碟檔案，在dist下生成新的打包檔案。
步驟：
1. npm install --save-dev [email protected]
2.在webpack.config.js中配置
3.配置package.json檔案
webpack-dev-server --open
已預設瀏覽器開啟
4.npm run dev 開啟伺服器，此時修改程式碼都會寫到記憶體中
5.npm run build，將記憶體中的內容寫到磁碟
6.開發階段不要使用uglifyjs，因為dev階段需要除錯在控制檯除錯script
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14974403.html