webpack-entry&output
webpack是静态模块打包器,可以递归的构建项目的依赖关系图。有4个重要的概念:
- entry(入口文件)
- output(出口文件)
- loaders
- plugins(插件)
本文首先介绍下entry和output:
entry
项目的入口文件,webpack中的默认值为’./src’,有2种写法:
- 简写:
webpack.config.js
//entry: string|Array<string>
const config = {
entry: path.join(__dirname, 'app/main')
}
//如果想添加互不依赖的多个文件,可使用数组格式
const config = {
entry: ['app/main.js','aap/other.js']
}
- 对象写法
const config = {
entry: {
app: path.join(__dirname, 'app/main')
}
}
对象写法可扩展性强,推荐使用,常用的使用场景有:
- 分离 应用程序(app) 和 第三方库(vendor) 入口
const config = {
entry: {
app: path.join(__dirname, 'app/main'),
vendor:path.join(__dirname, 'app/vendor')
}
}
以上这种方式比较常见于只有一个入口起点(不包括 vendor)的单页应用程序中。
如果在 app 中引用了 vendor,那么需要使用 CommonsChunkPlugin 插件。
- 多页应用
const config = {
entry: {
main: path.join(__dirname, 'app/main'),
other: path.join(__dirname, 'app/other')
}
};
多页应用与单页应用的配置基本相似,不同主要在于entry,另外,如果项目中用到了 抽离css样式的插件 extract-text-webpack-plugin,那么还需对这个插件进行改写。
extract-text-webpack-plugin 插件主要是为了抽离css样式,防止将样式打包在 js中引起页面样式加载错乱,多页面应用中,
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = {
entry: {
main: path.join(__dirname, 'app/main'),
other: path.join(__dirname, 'app/other')'
},
plugins: [
new ExtractTextPlugin('main/[name].[contenthash].css'),
new ExtractTextPlugin('other/[name].[contenthash].css')
]
}
output
webpack的出口文件,即使存在多个入口文件,也只能指定一个出口文件。
const config = {
output: {
filename: '[name].js',
//webpack4中的path默认值即为'./dist',可不用设置
path: path.join(__dirname, 'dist')
}
};