Entry與Output的基礎(chǔ)配置
當(dāng)我們?cè)谑褂脀ebpack進(jìn)行打包的時(shí)候，使用entry來(lái)定義我們的入口文件，使用output來(lái)定義我們的輸出文件。
通常情況下entry可以接受一個(gè)字符串作為參數(shù)，定義我們需要進(jìn)行打包編譯的入口文件。
const path = require('path')
module.exports = {
// 定義入口文件
entry: path.resolve(__dirname, "src/index.js"),
}
當(dāng)我們?cè)谟眠@種配置進(jìn)行打包的時(shí)候，webpack會(huì)在項(xiàng)目的根目錄下創(chuàng)建dist目錄，同時(shí)將entry定義的文件打包編譯為到其中命名為main.js。上面的配置等價(jià)于：
const path = require('path')
module.exports = {
// 定義入口文件
entry: {
main: path.resolve(__dirname, "src/index.js")
}
}
配置多入口打包
有的時(shí)候我們需要對(duì)多個(gè)入口文件進(jìn)行打包，并輸入成多個(gè)編譯文件，部署到CDN上被index.html文件引用，這時(shí)候我們就需要修改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")
})
]
}
這時(shí)在進(jìn)行打包，就可以看到，我們輸出的index.html就按照我們的需要，引入了目標(biāo)文件
