webpack-plugin

webpack4 plugin 学习

step1

  • 按照官网的教程

官网plugin教程

  • webpack-plugin_第1张图片

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效果

webpack-plugin_第2张图片

你可能感兴趣的:(前端,JavaScript,webpack)