三个配置文件
webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js来分别用以实现项目打包的基础模式、开发模式以及生产模式的应用
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsParallelPlugin = require('webpack-parallel-uglify-plugin');
const webpackBaseConfig = require('./webpack.base.config.js');
const path = require('path');
const package = require('../package.json');
html-webpack-plugin插件
HtmlWebpackPlugin简化了HTML文件的创建,以便为您的 webpack bundle 提供服务。这对于被更改文件的文件名中包含每次编译哈希(hash) 的webpack bundle尤其有用。您可以让插件为您生成一个HTML文件,使用lodash templates提供您自己的模板,或使用自己的加载器(loader)。
1.安装
npm install html-webpack-plugin --save-dev
2.使用
module.exports = {
......
plugins: [
.....
new htmlWebpackPlugin({
title: '话务系统',
favicon: './td_icon.ico',
filename: '../dist/index.html',
template: './src/template/index.ejs',
inject: false
})
]
}
title 生成html文件的标题
filename 就是html文件的文件名,默认是index.html
template 指定你生成的文件所依赖哪一个html文件模板,模板类型可以是html、jade、ejs等。但是要注意的是,如果想使用自定义的模板文件的时候,你需要安装对应的loader哦。
举例子:
npm install jade-loader --save-dev
loaders: {
...
{
test: /\.jade$/,
loader: 'jade'
}
}
inject
inject有四个值: true body head false
true 默认值,script标签位于html文件的 body 底部
body script标签位于html文件的 body 底部
head script标签位于html文件的 head中
false 不插入生成的js文件,这个几乎不会用到的
favicon 给你生成的html文件生成一个 favicon ,值是一个路径
extract-text-webpack-plugin插件
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;
npm install extract-text-webpack-plugin --save-dev
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件
publicfile:用来覆盖项目路径,生成该css文件的文件路径
copy-webpack-plugin
作用:在webpack中拷贝文件和文件夹
npm install --save-dev copy-webpack-plugin
案例:
new CopyWebpackPlugin([
{
from: 'src/tpl',
to: 'src/tpl'
},
{
from: 'static',
to: 'static'
},
{
from: 'src/views/main-components/theme-switch/theme'
}
]),
clean-webpack-plugin来清除dist文件夹中重复的文件
npm install --save-dev clean-webpack-plugin
new cleanWebpackPlugin(['dist/*.html','dist/*.js','dist/*.css','dist/*.ttf','dist/*.svg','dist/*.ico','dist/*.eot','dist/*.woff','dist/*.jpg','dist/src/tpl/*.js','dist/src/tpl/*.html'], {
root: path.resolve(__dirname, '../')
}),
webpack-parallel-uglify-plugin
Webpack
默认提供的 UglifyJS
插件,由于采用单线程压缩,速度颇慢 ;推荐采用webpack-parallel-uglify-plugin插件,它可以并行运行 UglifyJS 插件,更加充分而合理的使用 CPU
资源,这可以大大减少的构建时间;当然,该插件应用于生产环境而非开发环境。
plugins: [
...
new UglifyJsParallelPlugin({
cacheDir: '.cache/',
uglifyJS:{
output: {
comments: false
},
compress: false
}
}),
...
]