安装
npm install -g webpack webpack-cli快速开始
最新的webpack支持零配置使用，默认入口为当前目录下的src中的index.js文件，默认打包输出的目录为dist目录，默认打包模式mode为development
- 先建一个文件夹，如
webpack-test webpack-test文件下新建一个src目录，再src下新建一个index.js文件- 终端进入
webpack-test目录，运行webpack webpack会在webpack-test目录下生成一个dist目录。
配置项说明
在 webpack-test 目录下新建一个 webpack.config.js ，返回的是一个配置对象。
| 字段名 | 可选值 | 说明 | ||
|---|---|---|---|---|
| mode | "development" \ | "production" \ | "none" | 表示打包类型，为 production 时会压缩代码 |
| entry | 字符串 \ | 对象 | 打包入口文件 | |
| output | 对象 | 配置打包后文件夹和格式化文件名等 |
entry 配置入口文件
在src目录下新建a.js，b.js
// 单一入口module.exports = { entry:'./src/a.js'}// 多入口module.exports = { entry:{ a:'./src/a.js', b:'./src/b.js' }}在多入口时，会在 dist 目录下打包 a.js 和 b.js
output
- filename 打包之后的文件夹名
// 单入口情景module.exports = { entry:'./src/a.js', output:{ filename:'[name].[hash:7].js' }}// 打包后类似 main.abdfa13.js// 多入口情景module.exports = { entry:{ a:'./src/a.js', b:'./src/b.js' }, output:{ filename:'[name].[hash:7].js' }}// 打包后生成类似 a.abdfa13.js , b.abdfa13.js在配置文件中，有几个可用的参数，如hash当前打包随机字符串，name对应entry中的属性名（但单入口默认为main），ext对应loader中的文件后缀名。
- path 打包生成的目标文件夹，必须为一个绝对地址
const path = require('path');module.exports = { entry:'./src/a.js', output:{ filename:'[name].[hash:7].js', path:path.resolve(__dirname,'./dist') }}- publicPath，针对打包后的项目不在服务器的根目录访问，需要加上路径的情况。保证资源访问地址正确。主要体现在页面中引用绝对地址的图片，和 webpackPlugin 注入资源地址的时候。
比如最后项目访问路径为：https://haokur.com/webpack-test/index.html ，则需要配置
const path = require('path');module.exports = { entry:'./src/a.js', output:{ filename:'[name][hash:7].js', path:path.resolve(__dirname,'./dist/webpack-test'), publicPath:'/webpack-test/' }}发布时，则可以将 dist 下面的 webpack-test 目录部署到服务器的根目录下面。