vue使用webpack搭建项目，prod生产模式插件的基本解说

三个配置文件

webpack.base.config.js、webpack.dev.config.js、webpack.prod.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
     }
}),
...
]