webpack篇之插件plugin

一.html文件处理插件html-webpack-plugin

打包时希望在dist目录下生成index.html文件并依据某个模板生成
首先安装html-webpack-plugin

npm install [email protected] --save-dev

然后在webpack.config.js文件中配置

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']
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式文件添加到DOM中
            },
            {
     
                test: /\.less$/i,
                use:['style-loader','css-loader', 'less-loader']
                // css-loader只负责将css文件进行加载
                // style-loader负责将样式文件添加到DOM中
            },
            {
     
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
     
                    loader: 'url-loader',
                    options: {
     
                      limit: 8196,
                      name: 'img/[name][hash:8].[ext]'
                    },
                    
                  }
                ]
            },
            // {
     
            //     test: /\.(png|jpg|gif)$/i,
            //     use: [
            //       {
     
            //         loader: 'file-loader',
            //         options: {}
            //       }
            //     ]
            // }
            {
     
                test: /\.m?js$/,
                //打包时排除node_modules中的js文件
                exclude: /(node_modules|bower_components)/,
                use: {
     
                  loader: 'babel-loader',
                  options: {
     
                    presets: ['es2015']
                  }
                }
            },
            {
     
              test: /\.vue$/i,
              use: ['vue-loader'],
            }
        ],
    },
    // 开发时的vue依赖版本，vue.esm.js支持template的complier
    resolve:{
     
      extensions: ['.js', '.css', '.vue'],
      alias:{
     
        'vue$': 'vue/dist/vue.esm.js'
      }
    },
    plugins:[
      new webpack.BannerPlugin("最终版权归mym所有"),
      //html文件打包处理插件
      new htmlWebpackPlugin({
     
        template: 'index.html'
      })
    ]
}

二.js代码压缩插件uglifyjs-webpack-plugin

打包时js文件代码压缩丑化插件

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

安装完后然后在配置文件中配置插件

plugins:[
      new webpack.BannerPlugin("最终版权归mym所有"),
      new htmlWebpackPlugin({
     
        template: 'index.html'
      }),
      new UglifyJsPlugin()
    ]