2019-06-13 webpack打包压缩合并js

声明：我是先压缩，后合并的

创建project文件夹

---

终端进入project文件夹

---

在命令行创建一个webpack-demo （mkdir webpack-demo）

---

然后进入webpack-demo（ cd webpack-demp）

---

按照官网的基本设置一页进行配置安装,配置好后

---

打包html使用插件html-webpack-plugin

压缩js使用插件uglifyjs-webpack-plugin

---

webpack.config.js配置内容

const path = require('path');

const uglify = require('uglifyjs-webpack-plugin');

module.exports = {

    //入口文件

    mode:"development",

    (压缩单个文件 ）

     entry:'./scr/index.js',）

    （压缩多个文件）

     entry: {

      bundle1:'./src/index.js',

      bundle2:'./src/index.js',

      bundle3:'./src/index.js'//要压缩的文件

    },

（合并多个文件）

   entry:['./a.js','./b.js']

    //出口文件

  output: {

（压缩后单个文件）

  filename: 'bundle.js',//压缩后的文件名（bundle是我自己自定义的名字）

（压缩后多个文件）

    filename: '[name].js',//压缩后的文件名

（合并后的文件）

   filename: 'bundle.js'//合并后的文件名

    path: path.resolve(__dirname, 'dist')//压缩后的路径

  },

  module:{

    rules:[

        {

            test:/\.css$/,

            use:['style-loader','css-loader']

        }

    ]

    },

    plugins:[

        new uglify()//压缩js

    ]

};

---

然后在命令行输入webpack运行

两种情况：

1.成功会在src文件夹下自动生成对应名字的压缩好的js文件

2.会报错说找不到uglifyjs-webpack-plugin模块，就在命令行安装一下          （cnpm install uglifyjs-webpack-plugin --save-dev）

安装好之后再webpack运行

压缩好的文件就在dist文件夹下，原本文件的位置不变不压缩