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