entry的三种形式
配置文件中entry接受三种形式的值：字符串，数组和对象
对象entry
对象形式如下：
-
entry: {
-
<key>:
<value>
-
...
-
}
先介绍对象形式，是因为这个是最完整的entry配置，其他形式只是它的简化形式而已。对象中的每一对属性对，都代表着一个入口文件，因此多页面配置时，肯定是要用这种形式的entry配置。
key
key可以是简单的字符串，比如：'app', 'main', 'entry-1'等。并且对应着output.filename配置中的[name]变量
-
entry: {
-
'app-entry':
'./app.js'
-
},
-
output: {
-
path:
'./output',
-
filename:
'[name].js'
-
}
key还可以是路径字符串。此时webpack会自动生成路径目录，并将路径的最后作为[name]。这个特性在多页面配置下也是很有用的
-
entry: {
-
'path/of/entry':
'./deep-app.js',
-
'app':
'./app.js'
-
},
-
output: {
-
path:
'./output',
-
filename:
'[name].js'
-
}
上面的配置打包后生成
value
value如果是字符串，而且必须是合理的noderequire函数参数字符串。比如文件路径：'./app.js'(require('./app.js'))；比如安装的npm模块：'lodash'(require('lodash'))
-
entry: {
-
'my-lodash':
'lodash'
-
},
-
output: {
-
path:
'./output',
-
filename:
'[name].js'
-
}
上面的配置打包后生成：
具备了上面的能力，就可以开始配置一个简单的多页面webpack开发环境了。
开始前，要考虑清楚项目目录结构，使用wepback时，一般要有个src源代码目录和一个build的打包目录。
webpack.config.js
-
const
path=
require(
"path");
-
module.exports={
-
mode:
'development',
-
entry:{
-
'assets/js/home':
path.resolve(__dirname,
'./src/home/main.js'),
-
'assets/js/about':
path.resolve(__dirname,
'./src/about/main.js')
-
},
-
output:{
-
filename:
'[name].bundle.js',
-
path:
path.resolve(__dirname,
'./build'),
-
}
-
}
打包后
转载：https://blog.csdn.net/qq_27449993/article/details/117223338
查看评论