webpack-plugin

webpack4 plugin 学习

step1

• 按照官网的教程

官网plugin教程

• 

step2

• 安装工具

npm install --save-dev html-webpack-plugin
npm install --save-dev uglifyjs-webpack-plugin

• 编写webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const uglifyjsPlugin=require('uglifyjs-webpack-plugin');
const webpack = require('webpack'); //访问内置的插件
const path = require('path');


module.exports = {
    entry:'./index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {test:'/.\css$/',use:'css-loader'}
        ]
    },
    plugins: [
        //按照模板
        new HtmlWebpackPlugin({template:'./new.html'})

    ],
    //压缩js
    optimization: {
        minimizer: [
            new uglifyjsPlugin({
                uglifyOptions: {
                    compress: true
                }
            })
        ]
    }

}

step3

• 修改package.json

  "scripts": {
    "start": "webpack"
  },

step4

• 启动项目

 //在控制台输入
 webpack

step5效果