webpack entry 与 output 的基本配置

entry 配置项，可以传一个字符串，也可以传一个对象。

下面，entry 配置项就是传的对象。如果传字符串的话，实际上就等价于下面(字符串是main 对应的value )。

接着，我们如果在output 中指定了filename，那么最后打包js 的名字就是指定的filename, 否则就是 main.js ，而这个main.js 就来源与entry 中的key 值。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	mode: "development",
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		// filename: 'index.js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	})]
}

 

假设现在有一个需求，要将一个文件 index.js 打包两次，生成两个文件。可以像下面这样配置。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	mode: "development",
	entry: {
		main: "./src/index.js",
		sub: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	})]
}

如果，发布的时候，如果index.html 给后端，js 文件放在cdn 上，那么index.html 中引入的script 地址需要进行配置，像下面这样。

	output: {
		publicPath: "http://cdn.com.cn",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},