Webpack常用Plugin
plugin是对webpack的一个扩充,类似于loader。plugin使用也是两个步骤,首先使用npm下载,然后在webpack配置对应的插件就可以了。
1.html-webpack-plugin(index.html打包)
自动生成一个index.html文件(可以指定模板)
将打包的js文件,自动通过script标签插入到body中
//插件安装
nmp install html-webpack-plugin --save-dev
//引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//在插件中配置
plugins:[
new HtmlWebpackPlugin({
//配置文件所在目录下面的插件
template: 'index.html'
})
]
2.uglifyjs-webpack-plugin(js代码丑化压缩)
可以压缩js文件并且丑化js代码,使之可读性变差
不建议在开发环境使用
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
plugins:[
new UglifyjsWebpackPlugin()
]
3.webpack-dev-server(本地服务器)
本地服务器给予node.js,内部使用express框架,可以实现我们想要让流浪器自动刷新显示我们修改后的结果。
会将我们修改的代码重新编译,然后放入内存中,等到我们最后决定了之后可以使用npm run build映射到硬盘中
-contentBase: 为哪一个文件夹提供本地服务,默认是根文件夹
-prot: 端口号
-inline:页面实时刷新
-historyApiFallback:在SPA页面中,依赖HTML5的history
npm install --save-dev webpack-dev-server@2.9.1
devserver:{
//服务哪个文件夹
contentBase:'./dist',
//是否需要实时监听
inline: true
}
//webpack.json
"script":{
"dev": "webpack-dev-server --open"
}
//然后使用 npm run dev就可以启动了
4.webpack-merge(webpack.config.js抽离合并)
在webpack.config.js里面内容太多的时候进行分割,分为prod(生产环境),dev(开发环境),base(基本),然后在webpack.json中的“bulid”“dev”脚本后面增加 "–config ./build/prod.config.js"指定对应的webpackconfig。
npm install --save-dev webpack-merge
//base.config.js
const path = require("path");
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:[
{
//正则表达式 匹配文件中的css文件
test:/\.css$/,
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)$/,
use: [
{
loader: 'url-loader',
options: {
//加载图片 小鱼limit时候就会使用base64转换
limit: 10000,
//取原来图片的name
name:'img/[name].[hash:8].[ext]'
}
}
]
},
{
//babel把es6转到es5
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
//alias别名
alias:{
'vue$':'vue/dist/vue.esm.js'
},
extensions:['.js','.vue','.css']
},
plugins:[
new HtmlWebpackPlugin({
//配置文件所在目录下面的插件
template: 'index.html'
})
]
};
//prod.config.js
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
//引入插件
const WebpackMerge = require("webpack-merge");
const baseConfig = require("./base.config");
//合并webpack.config.js
module.exports = WebpackMerge(baseConfig,{
plugins:[
new UglifyjsWebpackPlugin()
]
});