webpack4 完整环境

	1、全局下载
		cnpm -g install [email protected]
        cnpm -g install [email protected]

    2、项目根目录下创建.babelrc文件
    	{
		    "presets": [
		        "env",
		        "react"
		    ],
   			 "plugins": ["react-hot-loader/babel"]
		}
	
	3、创建webpack.config.js文件/使用webpack-cli init 自动创建,其中遇到末尾不是[Y/N]的选项,直接回车

		const webpack = require('webpack');
		const path = require('path');
		const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
		const HtmlWebpackPlugin = require('html-webpack-plugin');
		// 3.ExtractTextWebpackPlugin调整为mini-css-extract-plugin
		const MiniCssExtractPlugin = require("mini-css-extract-plugin");
		
		module.exports = {
		
			// 1.用更加快捷的mode模式来优化配置文件
			// mode: 'production' // development
		
			entry: {
				app: './src/index.js'
			},
		
			output: {
				filename: '[name].bundle.js',
				path: path.resolve(__dirname, 'dist')
			},
		
			module: {
				rules: [
					{
						test: /\.(js|jsx)$/,
						exclude: /node_modules/,
						loader: 'babel-loader',
					},
					{
						test: /\.css$/,
						use: [
							MiniCssExtractPlugin.loader,
							{
								loader: 'css-loader'
							},
							'postcss-loader'
						]
					},
					{
						test: /\.less$/,
						use: [
							MiniCssExtractPlugin.loader,
							'css-loader',
							{
								loader: 'less-loader',
								options: {
									sourceMap: true,
									javascriptEnabled: true,
									modifyVars: {
										'primary-color': '#531dab',
									},
								}
							}
						]
					},
				]
			},
		
			plugins: [
		    // 压缩js
				new UglifyJSPlugin(),
		    // 处理html文件
				new HtmlWebpackPlugin({
					template: './index.html',
					chunks: ['app', 'commons']
				}),
		    // 分离css到dist目录下
				//new MiniCssExtractPlugin({
				 //   filename: "[name].[contenthash].css",
				 //   chunkFilename: "[id].[contenthash].css"
				//})
				
				//分离css文件到dist目录下的css文件夹
				　new MiniCssExtractPlugin({filename: './css/[name].css'})
			],
			
			// 2.再见commonchunk，你好optimization
			optimization: {
				splitChunks: {
					cacheGroups: {
						commons: {
							name: 'commons',
							priority: 10,
							chunks: 'initial'
						},
						styles: {
							name: 'styles',
							test: /\.(css|less)$/,
							chunks: 'all',
							minChunks: 2,
							enforce: true
						}
					}
				}
			}
		};
		
			
	
	4、创建postcss.config.js文件
		module.exports = {
		    plugins: [
		        require('autoprefixer')({
		            'browsers': ['> 1%', 'last 2 versions']
		        })
		    ]
		};
	
	5、创建package.json文件
		{
		  "name": "l",
		  "version": "1.0.0",
		  "description": "",
		  "main": "index.js",
		  "scripts": {
		    "dev": "webpack-dev-server --mode development --open --hot",
		    "build": "webpack --mode production"
		  },
		  "author": "",
		  "license": "ISC",
		  "devDependencies": {
		    "autoprefixer": "^9.0.1",
		    "babel-core": "^6.26.0",
		    "babel-loader": "^7.1.4",
		    "babel-plugin-import": "^1.8.0",
		    "babel-preset-env": "^1.6.1",
		    "babel-preset-react": "^6.24.1",
		    "babel-preset-stage-2": "^6.24.1",
		    "css-loader": "^0.28.11",
		    "html-webpack-plugin": "^3.2.0",
		    "less": "^3.8.0",
		    "less-loader": "^4.1.0",
		    "mini-css-extract-plugin": "^0.4.1",
		    "postcss-loader": "^2.1.6",
		    "react": "^16.4.1",
		    "react-dom": "^16.4.1",
		    "react-hot-loader": "^4.3.4",
		    "style-loader": "^0.20.3",
		    "uglifyjs-webpack-plugin": "^1.2.4",
		    "webpack": "^4.16.3",
		    "webpack-cli": "^3.1.1",
		    "webpack-dev-server": "^3.1.1"
		  }
		}

	6、安装package.json文件中的依赖
		cnpm install