webpack-Plugin
- 版權plugin
plugins: [
new webpack.BannerPlugin("author: 清水雲")
]
- html-webpack-plugin
# 配置打包HTML文件
# 安裝插件
npm install html-webpack-plugin --save-dev
# 配置plugin
plugins: [
new webpack.BannerPlugin("author: 清水雲"),
new HtmlWebpackPlugin({
template: 'index.html'
})
]
- uglifyjs-webpack-plugin
# 安裝插件
npm install [email protected] --save-dev
plugins: [
new webpack.BannerPlugin("author: 清水雲"),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new UglifyjsWebpackPlugin()
]
# 配置後打包可以將打包後的js壓縮
- webpack-dev-server
# 安裝插件 內存打包 頁面實時監聽刷新
npm install --save-dev [email protected]
# 配置插件
// 開發內存實時加載文件服務
devServer: {
// 服務於那個文件件
contentBase: './dist',
// 實時監聽
inline: true,
// 指定端口
port: 23333,
}
通過命令 啓動
npm run dev
"dev": "webpack-dev-server --open"
- webpack-merge
安裝 可以合併配置config.js文件
npm install webpack-merge
-
配置文件分離與merge
把 webpack.config.js改成三個文件
// file: base.config.js
const path = require('path');
module.exports = {
// 打包入口文件
entry: './src/main.js',
// 出口文件
output: {
// 出口文件絕對路徑
path: path.resolve(__dirname, '../dist'),
// 打包後的文件名字
filename: 'bundle.js',
// 打包時動態修改文件加載地址
// publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.css$/i,
// css-loader 只負責將css文件加載
// style-loader 負責將樣式添加到dom中
// 這裏配置順序需要注意 是從後向前加載的
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
// 當加載圖片時 文件大小 小於limit時 會將圖片編譯成base64字符串形式
// 當加載圖片時 文件大小 大於limit時 需要使用file-loader模塊進行加載
limit: 9999,
// 打包後文件的命名規則
// [name] 文件打包前的名字
// [hash:8] 截取8位hash值
// [ext] 擴展名
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
// exclude 轉換的時候排除的內容
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
// vueloader
use: ['vue-loader']
}
],
},
resolve: {
alias: {
// 指定 在其他地方導入vue的時候 vue來自哪裏
// 在node_modules/vue/dist/ 中 默認是 vue.runtime.esm.js 修改爲 vue.esm.js
'vue$': 'vue/dist/vue.esm.js'
}
},
};
// file:dev.config.js
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
// 合併配置文件
module.exports = WebpackMerge(baseConfig, {
// 開發內存實時加載文件服務
devServer: {
// 服務於那個文件件
contentBase: './dist',
// 實時監聽
inline: true,
// 指定端口
port: 23333,
}
});
// file: prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');
// 合併配置文件
module.exports = WebpackMerge(baseConfig, {
plugins: [
new UglifyjsWebpackPlugin()
],
});
最後在package.json 中指定加載配置文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},