Entry与Output的基础配置
当我们在使用webpack进行打包的时候,使用entry来定义我们的入口文件,使用output来定义我们的输出文件。
通常情况下entry可以接受一个字符串作为参数,定义我们需要进行打包编译的入口文件。
const path = require('path')
module.exports = {
// 定义入口文件
entry: path.resolve(__dirname, "src/index.js"),
}
当我们在用这种配置进行打包的时候,webpack会在项目的根目录下创建dist
目录,同时将entry
定义的文件打包编译为到其中命名为main.js
。上面的配置等价于:
const path = require('path')
module.exports = {
// 定义入口文件
entry: {
main: path.resolve(__dirname, "src/index.js")
}
}
配置多入口打包
有的时候我们需要对多个入口文件进行打包,并输入成多个编译文件,部署到CDN上被index.html
文件引用,这时候我们就需要修改wepack.config.js的配置了。(/source_code/03/03-06/webpack.config.2.js)
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
// 定义多入口打包
entry: {
main: path.resolve(__dirname, "src/index.js"),
sub: path.resolve(__dirname, "src/index.js")
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, "dist"),
publicPath: 'http://cdn.com.cn'
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html")
})
]
}
这时在进行打包,就可以看到,我们输出的index.html
就按照我们的需要,引入了目标文件