声明：我是先压缩，后合并的
创建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文件夹下，原本文件的位置不变不压缩
网友评论