webpack5环境搭建。

webpack.config.js

//path模块是nodejs 自带的，不需要额外下载
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
//优化html的以及入口配置代码
const lists = ['index','logon','register','details','seats','getticket','map']
const {NODE_ENV} = process.env
module.exports = {
//配置打包的模式
// mode: 'production', //生产模式
// mode: 'development', //开发模式
mode:NODE_ENV,
//配置项目的入口js
entry: {
     ...lists.reduce((total,next)=>{
        return {...total,[next]:`./src/js/${next}.js`}
    },{})
},
//配置出口
output:{
    path:path.resolve(__dirname,'dist'),  //这个地方必须是一个绝度路径，这里需要用到path.resolve()来拼接绝对路径
    filename:'./js/[name].js',  //指定js的打包出口位置
    clean:true, //每次打包都清除原本的文件

  
},
//配置插件
plugins: [

//处理html文件的配置
    ...lists.map(item=>{
        return new HtmlWebpackPlugin({
            template:`./src/${item}.html`,  //源html文件位置
            filename:`./${item}.html`,
            chunks:[item]
        })
    }),
    new MiniCssExtractPlugin({
        filename:'./css/[name].css'
    }),
    new webpack.ProvidePlugin({            
        "$":"jquery",
        "jQuery":"jquery"          
    }),  
   

],
optimization:{
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,//不将注释提取到单独的文件中
      }),
    ],
  },
//配置loader
module: {

    rules: [
        {
            oneOf:[
                {
                    test: /\.css$/i,
                    exclude: /node_modules/,
                    use: [
                        // "style-loader",  //利用js创建style标签，将样式通过js放在style标签内
                        MiniCssExtractPlugin.loader,
                        "css-loader", //将css中的样式代码，转换到js中
                        {
                            loader:"postcss-loader",
                            options:{
                                postcssOptions:{
                                    plugins:[
                                        "postcss-preset-env" //解决大多数样式的兼容问题
                                    ]
                                }
                            }
                        },
                    ],
                },
                {
                    test: /\.s[ac]ss$/i,
                    exclude: /node_modules/,
                    use: [
                    // 将 JS 字符串生成为 style 节点
                    // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    {
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    "postcss-preset-env" //解决大多数样式的兼容问题
                                ]
                            }
                        }
                    },
                    'sass-loader',
                    ],
                },
                {
                    //处理图片的路径
                    test:/\.(png|jpe?g|gif|webp|svg)$/,
                    exclude: /node_modules/,
                    type:'asset',
                    generator:{
                        filename:'images/[hash][ext][query]',
                        // publicPath:'./'
                    },
                    parser: {
                        dataUrlCondition: {
                          maxSize: 8 * 1024 // 8kb以下的图片转为base64格式
                        }
                    }
                },
                {
                    //处理图片的路径
                    test:/\.mp4$/i,
                    exclude: /node_modules/,
                    type:'asset',
                    generator:{
                        filename:'video/[hash][ext][query]',
                        publicPath:'./'
                    },
              
                },
                {
                    test: /\.html$/i,
                    exclude: /node_modules/,
                    loader: "html-loader",
                },
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            ]
        },
        

    ],
},
devServer: {
    hot:true,     //开启热更新
    port:8000,    //指定开启的端口，默认是8080
    open:true  
  },
  watchOptions: {
    ignored: /node_modules/
}

};