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

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

创建project文件夹

终端进入project文件夹

在命令行创建一个webpack-demo (mkdir webpack-demo)

然后进入webpack-demo( cd webpack-demp)

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

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文件夹下，原本文件的位置不变不压缩