webpack4学习笔记

webpack4 学习笔记

1 安装

• npm install webpack@4.26.0 webpack-cli@3.1.2 -D
• npm install url-loader -D
• npm install style-loader css-loader -D
• npm install sass-loader node-sass -D
• npm install html-webpack-plugin -D
• npm install mini-css-extract-plugin
• npm install clean-webpack-plugin -D
• npm install optimize-css-assets-webpack-plugin -D
• npm install webpack-dev-server -D
• npm install babel-loader @babel/core -D
• npm install @babel/preset-env -D
• npm install @babel/polyfill -D
• npm install @babel/plugin-transform-runtime -D
• npm install @babel/runtime -D
• npm install @babel/runtime-corejs2 -D
• npm install @babel/preset-react -D // 打包react文件时，配置
• npm install webpack-merge -D // 配置文件，提取公共部分时，使用

2 配置

package.json

// 防止被tree shaking
"sideEffects": [
    "*.css",
    "*.png"
  ],
  "scripts": {
    "build": "webpack --mode production --progress",
    "dev": "webpack-dev-server --mode development --progress "
  },
   // "scripts": {
   // "build": "webpack --config webpack.prod.js", // 配置分别放不同文件
   // "dev": "webpack-dev-server --config webpack.dev.js "
 // },

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 生成专门的css文件夹，只有线上的
// 代码才需要用到这个插件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css插件
// const merge = require('webpack-merge');
// const commonConfig = require('./webpack.common.js');
// module.exports = merge(commonConfig ,devConfig);
// module.exports = merge(commonConfig ,prodConfig);

const currentTarget = process.env.npm_lifecycle_event;

let debug = false;
if (/^(watch|dev)$/g.test(currentTarget)) {
    debug = true;
}

module.exports = {
	// mode:'development',
	// mode:'production',
	 // 当报错时，发现源代码错误的位置，而不是打包出的文件的位置
	devtool:'cheap-module-eval-source-map',  // 开发中使用
	// devtool:'cheap-module-source-map',  // 上线中使用
	entry: {
		main:'./src/index.js'，
		mian2:'./src/index2.js'
	},
	output: {
		publicPath:'xxx.xxx.xx'  // 将生成引入的js文件，前面加上此地址
		filename: '[name].js',  // 导入页面的主入口js文件
		path: path.resolve(__dirname, 'dist'),
		chunkFilename:'[name].chunk.js', // 被主js文件引入 
		libraryTarget: 'umd',  // 打包出来的是工具库，可以被别人引入
		library: 'wzmTEST' //  可以被别人直接以script标签的方式引入，之后会把wzmTEST这个放入到全局变量上
	},
	externals: [], // 打包过程中忽略的库，不打包的库
	module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,
                    // name: '[name]_[hash].[ext]', 
                    name: '[name].[ext]',  // 打包出来老的图片的名字和老的图片的后缀
                    outputPath: 'img/' // 结果在dist/img/下
                }
            }]
        }, {
           test: /\.css$/,
            use: [debug ? 'style-loader' : MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
            }
            ]
        }, {
            test: /\.scss$/,
            use: [debug ? 'style-loader' : MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: true    // 样式模块化
                    }
                },
                'sass-loader']
        }, {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                "plugins": [
                    ["@babel/plugin-transform-runtime", {
                        "corejs": 2,
                        "helpers": true,
                        "regenerator": true,
                        "useESModules": false
                    }], 
                    "@babel/preset-react" // 翻译react代码
                ]
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({   // 会在打包结束后，自动生成HTML文件，并把打包生成的js自动引入到这个页面中
            filename: 'index.html',  // 文件名
            template: 'src/index.html',  // 参考模板1
            inject: true，
            chunks:['','']    // 每一个页面分别需要引入的js文件
        }),
        new HtmlWebpackPlugin({   // 多页面打包配置
            filename: 'index2.html',   // 文件名
            template: 'src/index2.html',  // 参考模板2
            inject: true
            chunks:['','']    // 
        }),
        new CleanWebpackPlugin(['dist']),
        new MiniCssExtractPlugin({
            filename: './css/CloudHubVideo_[name].css',  // 直接引入的文件，生成css文件名
            chunkFilename: 'css/[name].chunk.css',   // 间接引入的css文件
        }),
    ],
    devServer:{
    	contentBase:'./dist',  // 服务器要开启在哪一个文件夹下,同时配置 "start": "webpack-dev-server"
    	open:true,  // 运行时，自动打开浏览器
    	proxy:{
				'api':'xxx,xxx,xxx:3000'  // 跨域代理
			},
		port:8090,   // 配置打开的端口号
		progress:true, // 显示打包的进度条
    },
    optimization: {
        splitChunks: {
            chunks: 'all', // 同步代码和异步代码都分割
            minChunks: 1,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/, // 这里的文件进行分割
                    priority: -10,
                    filename: 'CloudHubVideo_vendors.js'
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                    filename: 'common.js'
                },
                // 如果多页面打包，需要不同页面引入不同css,则需要加入下面的配置
                mainStyles: {
			          name: 'main',
			          test: (m,c,entry = 'main') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
			          chunks: 'all',
			          enforce: true
			        },
		       main2Styles: {
		          name: 'main2',
		          test: (m,c,entry = 'main2') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
		          chunks: 'all',
		          enforce: true
		            }
        },
        minimizer: [new OptimizeCssAssetsPlugin({})]
    }
    
}