webpack4 完整环境

ゝ一世哀愁。 2021-07-24 20:39 311阅读 0赞

1、全局下载
    		cnpm -g install webpack@4.16.3
            cnpm -g install webpack-cli@3.1.1
    
        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