来源网络
# 一、entry
//方式一：单文件写法
entry: {
index: './src/pages/route.js',
//about: './src/pages/about.js',
//other:()=>{...}
}
//方式二：多文件写法
entry: {
/*index:[
'webpack-hot-middleware/client',
'./src/root.js'
],*/
index: ['./src/root.js'],
vendors : ['react','react-dom','redux','react-router','classnames'],
}
@前端进阶之旅: 代码已经复制到剪贴板
# 二、output
path: 输出文件的目录，filename:输出的文件名，它一般跟你entry配置相对应，如：js/[name].jsname在这里表示的是[index、vendors]，chunkFilename：块，配置了它，非入口entry的模块，会帮自动拆分文件，也就是大家常说的按需加载，与路由中的require.ensure相互应publicPath：文件输出的公共路径，pathinfo：即保留相互依赖的包中的注释信息，这个基本不用主动设置它，它默认 -development模式时的默认值是true，而在production模式时的默认值是false，- 主要的就是这些，还有一些其他的
library、libraryTarget、auxiliaryComment等
output: {
path: path.resolve(__dirname, '../assets'),
filename: 'js/[name].js',
chunkFilename: 'js/[name].[chunkhash:8].js',
publicPath: '/_static_/', //最终访问的路径就是：localhost:3000/_static_/js/*.js
//pathinfo:true,
}
@前端进阶之旅: 代码已经复制到剪贴板
# 三、hash
常用的有三种
| 模板 | 描述 |
|---|---|
hash |
模块标识符的hash,一般应用于filename：'[name].[hash].js' |
chunkhash |
按需加载块内容的hash，根据chunk自身的内容计算而来,'js/[name].[chunkhash:8].js' |
contenthash |
这个没有用过，看了下文档它是在提取css文件时根据内容计算而来的 hash ，结合ExtractTextWebpackPlugin插件使用 |
hash长度 |
默认20，可自定:[hash:8]、[chunkhash:16] |
# 四、mode
- 这个属于
webpack4才新增的，4之前大家一般用DefinePlugin插件设置 mode：development``，production，none`，development: 开发模式，打包的代码不会被压缩，开启代码调试，production: 生产模式，则正好反之。
//方法一
webpack --mode development/production
//方法二
……
