前言

官网https://webpack.js.org/

依赖于 node 环境
包管理工具 npm ==》cnpm

安装

安装 node

C:\Program Files\nodejs\

安装完以后看一下版本

node -v

node -v
从结果来看，目前安装的版本时12.13.0

---

使用npm安装webpack

目前官网最新版本是：4.41.2，但这里先尝试全局3.6.0，vue cli2依赖该版本

npm install webpack@3.6.0 -g

webpack

使用

webpack ./src/main.js ./dist/bundle.js

webpack

webpack.config.js

loader

• 通过npm安装loader，到官网
• 在webpack.config.js中的

npm install --save-dev css-loader

---

抽离配置文件
有些配置选项只需在开发时使用，而有些配置选项只需要在上线时使用，这里就需要对配置文件进行一定的分离操作，
怎么分离？
分液漏斗？

规划一下：

• base.config.js 基础配置
• dev.config.js 开发配置
• prod.config.js 上线产品配置

base.config.js

可以把webpack.BannerPlugin配置到dev.config.js
把UglifyJsPlugin配置到prod.config.js

这里需要webpack-merge

npm install --save-dev webpack-merge

然后时不同排列组合

module.exports = {
    plugins: [
        new UglifyJsPlugin()
    ]
}

prod.config.js和base,config.js配合使用

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        new UglifyJsPlugin()
    ]
})

在package.json中配置命令

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack --config ./build/dev.config.js"

配置完工执行命令发现dist文件夹跑到了build下

dist

去base.config.js文件中更改output为

output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'bundle.js'
    },

Snipaste_2019-11-20_11-41-13.jpg

重新执行命令，dist就和build在同一文件夹下了

dist