webpack中的四个核心概念

在配置webpaak时需要在项目的根目录下创建webpack.config.js配置文件。其中涉及到webpack中四个核心概念，分别为：

（1）配置入口（entry）

module.exports = {
	entry:'./src/index.js'
}

（2）配置出口（output）

const path = require('path');
module.exports = {
	// ...
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'main.js'
	}
}

（3）配置加载器（loader）

module.exports = {
	// ...
	module:{
		rules:[
			{
				test: /\.css$/,
				use:['style-loader','css-loader']
			},
			{
				test: /\.js?$/, // jsx/js文件的正则
				exclude: /node_modules/, // 排除 node_modules 文件夹
				use:{
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
			}
		]
	}
}

（4）配置插件（plugin）

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
	// ...
	plugins:[
		new HtmlWebPackPlugin({
			template: 'public/index.html',
			filename: 'index.html',
			inject: true
		})
	]
}