webpack 配置

webpack 配置

wepack4- 配置

// resolve用来拼接绝对路径的方法
const {
    resolve } = require('path')
// 引入html文件插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清除包 4+以上 { CleanWebpackPlugin }
// const { CleanWebpackPlugin }  = require('clean-webpack-plugin');
// 
// 抽离css样式
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
   
    // 入口文件
    entry: './index.js',
    // 输出
    output:{
   
        // 文件名称指定目录
        filename: 'app.[chunkhash].js',
        path: resolve(__dirname,'dist')
    },
    module:{
   
        // loader配置
        rules:[
            {
      
                test: /\.js$/,
                // 引入一个loader   
                loader: 'babel-loader'
                
            },
            {
   
                test:/\.css$/,
                // 多个loader 从右到左，从下到上 
                //use: ['style-loader','css-loader']
                // 提取css
                use: ExtractTextPlugin.extract({
   
                    fallback: "style-loader", // 编译后用什么loader来提取css文件
                    use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
                })
            }
        ]
    },
    // 在webpack4+ 才有模式 development 开发模式 production 生成模式
    // mode: 'development',
    // 插件
    plugins:[
        new HtmlWebpackPlugin(),
        // new CleanWebpackPlugin(), // 4+ 不传参数
        // css输出 只能在webpack低于4使用
        new ExtractTextPlugin({
   
            filename: 'app.[contenthash].css',
            allChunks: true
        })
     
   
    ],
    devServer:{
   
        // 项目构建输出路径
        contentBase: './dist',
        // 启动gzip压缩
        compress: true,
        // 端口号
        port: 8888,
        // 自动打开浏览器
        open: true,
        host: 'localhost',
        hot: true,
        // 监视文件
        watchOptions:{
   
            // 忽略文件（也就是不进行监视）
            ignored: /node_modules/
        },
        // 服务器代理 解决开发环境的跨域问题
        proxy:{
   
            '/api':{
   
                target: 'http://localhost:6666',
                // 发送请求时，路径重写， /api/xxx ==> /xxx
                pathRewrite:{
   
                    '^/api':''
                }
            }
        }
    },
     optimization:{
   
        splitChunks:{
   
            // 代码分割
            chunks: 'all',
            minSize: 30*1024, // 分割的chunk最小为30kb
            maxSize: 0, // 最大没有限制
            minChunks: 1, // 要提取的chunk最少被引用1次
            maxAsyncRequests: 5, // 按需加载时并行加载的文件
            maxInitialRequests: 3, // 入口js文件最大并行请求数量
            automaticNameDelimiter: '~', // 名称连接符
            name: true, // 可以使用命名规则
            cacheGrops:{
   
                // 分割chunk组
                // node_modules文件会被打包到vendors组的chunk中
                vendors:{
   
                    test: /[\\/]node_modules[\\/]/,
                    //优先级
                    priority: -10,
                },
                default:{
   
                    // 要提取的chunk最少被引用2次
                    minChunk: 2,
                    priority: -20,
                    // 如果当前要打包的模块，和之前已经被提取的模块是同一个，就会复用，而不是重新打包
                    reuseExistingChunk: true
                }
            }

        },
        // minimizer:[
        //     //  配置生成环境的压缩方案 js css
        //     new TerseWebpackPlugin({
   
        //         // 开启缓存
        //         cache: true,
        //         // 开启多进程打包
        //         parallel: true,
        //         // 启动source-map
        //         sourceMap: true
        //     })
        // ]
    }
}

wepack4+ 配置

/**
 *  
 *  "@babel/core": "^7.13.15",
 *  "@babel/preset-env": "^7.13.15",
 *  "babel-loader": "^8.2.2",
 *  "clean-webpack-plugin": "^4.0.0-alpha.0",
 *  "css-loader": "^5.2.1",
 *  "css-minimizer-webpack-plugin": "^2.0.0",
 *  "html-minimizer-webpack-plugin": "^2.1.0",
 *  "html-webpack-plugin": "^5.3.1",
 *  "mini-css-extract-plugin": "^1.4.1",
 *  "style-loader": "^2.0.0",
 *  "webpack": "^5.32.0",
 *  "webpack-cli": "^4.6.0" 
 * 
 */

// resolve用来拼接绝对路径的方法
const {
    resolve } = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');
// 压缩hmtml
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
// 清除包 4+以上 { CleanWebpackPlugin }
const {
    CleanWebpackPlugin }  = require('clean-webpack-plugin');

// webpack4+ css分离
const MiniExtractTextPlugin = require('mini-css-extract-plugin')
// 压缩css
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
   
    // 入口文件
    entry: {
   
        page1: './index1.js',
        page2: './index2.js',
        page3: './index3.js',
    },
    // 输出
    output:{
   

        filename: '[name].[chunkhash].js',
        path: resolve(__dirname,'dist')
    },
    module:{
   
        // loader配置
        rules:[
            {
      
                test: /\.js$/,
                // 引入一个loader   
                loader: 'babel-loader'
                
            },
            {
   
                test:/\.css$/,
                // 多个loader 从右到左，从下到上 
                // use: ['style-loader','css-loader']
                use: [ MiniExtractTextPlugin.loader,'css-loader']
            }
        ]
    },
    // 在webpack4+ 才有模式 development 开发模式 production 生成模式
    mode: 'development',
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
   
            chunks:['page1'], //添加引入的js,也就是entry中的key, 不然会引入全部
            minify:{
   
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            filename:'page1.html',
            title:'页面1',  // 页面标题 如果需要 需要在HTML里 嵌入  <title><%= htmlWebpackPlugin.options.title%></title>
            template: './index1.html'
        }),
        new HtmlWebpackPlugin({
   
            chunks:['page2'], 
            filename:'page2.html',
            title:'页面2',
            template: './index2.html'
        }),
        new HtmlWebpackPlugin({
   
            chunks:['page3'], 
            filename:'page3.html',
            title:'页面3',
            template: './index3.html'
        }),
    
        new CleanWebpackPlugin(),

        new MiniExtractTextPlugin({
   
            filename: '[name].[contenthash].css',
            ignoreOrder: true,
        })
    ],
    optimization: {
   
        minimize: true,
        minimizer: [
          // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
          // `...`,
          new CssMinimizerPlugin(),
          new HtmlMinimizerPlugin(),
        ],
    },
  
}