entry
webpack的entry指定webpack打包项目时的入口文件（即指定哪个文件为起点进行打包）
entry写法主要有下列几种:
- 第一种
webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: './index.js', // 指定当前目录的index.js为打包的入口文件 output: { filename: 'main.js', // 打包后输出的打包文件的文件名 path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 } }
- 第二种
webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: { main: './index.js', // 指定当前目录的index.js为打包的入口文件 // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name }, output: { filename: 'main.js', // 打包后输出的打包文件的文件名 path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 } }
- 第三种（如果要设置多入口文件的情况）
webpack.config.js
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: { main: './index.js', // 指定当前目录的index.js为打包的入口文件 // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name sub: './sub.js', // 可以有多个入口文件，指定当前目录的sub.js为打包的入口文件 }, output: { filename: '[name].js', // 打包后输出的打包文件的文件名,写成[name]的形式，生成的文件名会和entry的Chunk Name同名 path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 } }
output
output指定打包后生成的打包文件和打包文件存储路径
- output 的filename是打包后生成的文件名
- output的path是打包后生成的文件所放置的位置（必须是绝对路径，所以要引入node的path依赖包，_dirname是webpack.config.js所在的绝对路径，存储路径就是_dirname+自定义路径）
- publicPath是对页面引入资源的补充,比如img标签引入或者css引入等，一般来说，如果打包本地资源报404，很有可能就是publicPath没设置正确导致的
- 实例及注释
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: { main: './index.js', // 指定当前目录的index.js为打包的入口文件 // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name }, output: { filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename） path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径 // 整体路径为第一个参数+第二个参数，即__dirname + dist // 是所有输出文件的目标路径（物理路径, 存储路径）; publicPath: '/' // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath， // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath // （文件引用路径就是看这个） // 是对页面引入资源的补充,比如img标签引入或者css引入等. // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件 // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置 } }
备注：entry和output实际上还有很多配置，这里只阐述基本配置，如有需要，可自行查阅官网获取更多配置
mode
打包模式，值有development（开发环境）、production（生产环境）
development环境下，代码默认不压缩，production环境下，代码默认压缩
const path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块 module.exports = { entry: { main: './index.js', // 指定当前目录的index.js为打包的入口文件 // 实际上是 entry: './index.js' 的具体写法，main为打包的Chunk Name }, mode: 'development', // mode 指定打包模式（development（不会被压缩），production（这个模式的话代码会被压缩）） // development默认配置了sourcemap // development默认无tree shaking配置，需要额外配置 output: { filename: '[name].js', // 打包后输出的打包文件的文件名，根据entry的chunk name作为输出文件名（如果entry有多个入口文件时必须用占位符这样设置output.filename） path: path.resolve(__dirname, 'dist'), // 指定打包后输出的打包文件在当前webpack.config.js所在文件夹的绝对路径的dist文件夹下 // path值必须是绝对路径 ，所以引入path包，__dirname代表当前webpack.config.js所在文件夹的绝对路径 // 整体路径为第一个参数+第二个参数，即__dirname + dist // 是所有输出文件的目标路径（物理路径, 存储路径）; publicPath: '/' // （url 相对于 HTML 页面所在文件夹的绝对路径 + 值）给output配置全局的publicPath， // 这样各个loader打包出来的文件发布路径（引用地址）就是此全局publicPath + loader的options.outputPath // （文件引用路径就是看这个） // 是对页面引入资源的补充,比如img标签引入或者css引入等. // 千万不能设错，应该观察文件和HTML页面的存储地址位置，进行设置，否则引用时地址会错误，找不到文件 // publicPath: 'http://www.cdn.cn' // 如果，想把打包后生成的index.html作为入口文件，而打包生成的js放到服务器上如http://www.cdn.cn,那么webpack就应该这样设置 } }
development模式打包生成的main.js（代码未压缩）
production模式打包生成的main.js（代码被压缩）
