webpack学习笔记——核心概念

核心概念

1. 入口(entry)

单个入口（简写）语法：entry: string|Array<string>
对象语法：entry: {[entryChunkName: string]: string|Array<string>}

module.exports = {
  entry: './path/to/my/entry/file.js' // 该写法和我的一样
  // 该写法有扩展性（多页面应用程序）
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

2. 输出(output)

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

3. loader：用于转换某些类型的模块
   test属性——识别出哪些文件会被转换
   use属性——定义出在进行转换时，应该使用哪个 loader

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

4. 插件(plugin)

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5. 模式(mode)

module.exports = {
  mode: 'production'
};

6. 浏览器兼容性(browser compatibility)
7. 环境(environment)

个人写法

module.exports = function (webpackEnv) {
	const isEnvDevelopment = webpackEnv === 'development';
	const isEnvProduction = webpackEnv === 'production';
	return {
		entry: [isEnvDevelopment && 'webpack-hot-middleware/client?noInfo=true&reload=true', paths.appIndexJS].filter(Boolean),
		mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
		output: {
			path: isEnvProduction ? path.resolve(__dirname, 'dist') : undefined,
			filename: isEnvProduction ? 'js/[name].[contenthash:8].chunk.js'
		},
		moudle: {
			rules: [
				{
					test: /\.(js|jsx|mjs)$/,
					use: [
						{
							loader: require.resolve('eslint-loader'),
							options: {
								fix: true,
							},
						},
					],
				},
			]
		}
		plugins:[
	        new webpack.optimize.CommonsChunkPlugin({
	            name: "common",
	        }),
    	]
	}
}