聲明：我是先壓縮偷崩，后合并的
創(chuàng)建project文件夾
終端進(jìn)入project文件夾
在命令行創(chuàng)建一個(gè)webpack-demo （mkdir webpack-demo）
然后進(jìn)入webpack-demo（ cd webpack-demp）
按照官網(wǎng)的基本設(shè)置一頁(yè)進(jìn)行配置安裝,配置好后
打包html使用插件html-webpack-plugin
壓縮js使用插件uglifyjs-webpack-plugin
webpack.config.js配置內(nèi)容
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
? ? //入口文件
? ? mode:"development",
? ? (壓縮單個(gè)文件 ）
? ? ?entry:'./scr/index.js',）
? ? （壓縮多個(gè)文件）
? ? ?entry: {
? ? ? bundle1:'./src/index.js',
? ? ? bundle2:'./src/index.js',
? ? ? bundle3:'./src/index.js'//要壓縮的文件
? ? },
（合并多個(gè)文件）
? ?entry:['./a.js','./b.js']
? ? //出口文件
? output: {
（壓縮后單個(gè)文件）
? filename: 'bundle.js',//壓縮后的文件名（bundle是我自己自定義的名字）
（壓縮后多個(gè)文件）
? ? 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運(yùn)行
兩種情況：
1.成功會(huì)在src文件夾下自動(dòng)生成對(duì)應(yīng)名字的壓縮好的js文件
2.會(huì)報(bào)錯(cuò)說(shuō)找不到uglifyjs-webpack-plugin模塊辟拷，就在命令行安裝一下? ? ? ? ? （cnpm install uglifyjs-webpack-plugin --save-dev）
安裝好之后再webpack運(yùn)行
壓縮好的文件就在dist文件夾下撞羽，原本文件的位置不變不壓縮
