webpack配置整理

const {resolve}=require("path");
/* 
    htmlWebpackPlugin
    主要作用：为应用程序生成一个html,也就是打包后的html，并自动将所有的bundle注入到html中
*/
let htmlWebpackPlugin = require('html-webpack-plugin');  // 通过 npm 安装

//关于resolve的__dirname
console.log(resolve(__dirname,"./src/main.js"));  //D:\frame\webpack\src\main.js
console.log(resolve("./src/main.js"));  //D:\frame\webpack\src\main.js
console.log(resolve(__dirname)); //D:\frame\webpack
console.log(resolve()); //D:\frame\webpack

module.exports={
    entry:resolve(__dirname,"./src/index.js"),   //项目的入口文件，默认是./src/index.js
    output:{
        filename:"[name].js",//输出文件的名字,name对应的是entry中的 "index.js"的,这儿生成后是index.js，也可以不用name,用bundle.js
        path:__dirname+"/dist"     //出口文件所在目录，也就是打包后的整体目录
    },  //项目的出口文件
     
    // externals表示打包的时候要忽略的文件,因为采用了cdn
    //  externals:{
    //     echarts: 'echarts',
    //     moment: 'moment',
    //     vant: 'vant',
    // },   

    //loader
    /*
        这里因为创建了webpack.config.js,所以使用配置方式，
        test 属性，识别出哪些文件会被转换。
        use 属性，定义出在进行转换时，应该使用哪个 loader。
        tip:loader是从右到左（或从下到上）地取值
    */
    module:{
        /*
            rules说明：
            告诉webpack 编译器，当碰到".css"时，在对它打包之前，先 use(使用) css-loader 转换一下。
        */
        //常用loader
        rules:[
            { 
                test: /\.css$/, 
                use: 'css-loader',  //npm install --save-dev css-loader
                // 当只有一个loader的时候可以不适用use，直接使用loader
                //loader: 'css-loader',
            },
            { 
                test: /\.ts$/, 
                use: 'ts-loader'  //npm install --save-dev css-loader
            },
            {
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
             },
             {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
             },
             {
                /*
                  处理不了html中的img图片 需要用html-loader
                */
                test: /\.(jpg|png|gif)$/,
                // 使用一个loader  url-loader依赖file-loader
                loader: 'url-loader',
                options: {
                  /*
                    图片小于12kb,会被base64处理
                    优点：减少请求数量（减轻服务器压力）
                    缺点：图片体积会更大（文件请求速度更慢）
                  */
                  limit: 12 * 1024,
                  /*
                    问题：url-loader默认使用es6模块化解析,而html-withimg引入图片是common.js
                    解析时会出现问题：[object Module]
                    解决：关闭url-loader的es6模块化，使用common.js解析
                  */
                  esModule: false,
                  name: 'images/[hash:8][name].[ext]',
                },
              },
        ],
    },

     /*
        1.ProgressPlugin用于自定义编译过程中的进度报告
        2.HtmlWebpackPlugin的作用：
        会自动帮你生成一个html 件，并且引用相关的assets文件(如 css, js)。
    */
    plugins:[
        new webpack.ProgressPlugin(),
        new HtmlWebpackPlugin({ 
            template: './src/index.html',
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true,
                },
        }),
    ],//里面传入的必须是new 实例
    
    devServer: {
        // 只会在内存中编译打包，不会有任何输出文件，终止运行会删除内存
        // 开发时可直接访问到 ./build 下的静态资源，这些资源在开发中不必打包
        // 运行代码的目录
        contentBase: resolve(__dirname, 'build'),
        // 监视 contentBase 目录下的所有文件，一旦文件变化就会 reload
        watchContentBase: true,
        watchOptions: {
          // 忽略文件
          ignored: /node_modules/,
        },
        compress: true, // 启动gzip压缩
        port: 5000,   // 端口号
        host: 'localhost', // 域名
        open: true,// 自动打开浏览器
        hot: true,// 开启HMR功能
        clientLogLevel: 'none', // 不要显示启动服务器日志信息
        quiet: true,// 除了一些基本启动信息以外，其他内容都不要显示
        overlay: false, // 如果出错了，不要全屏提示~
        // 服务器代理 --> 解决开发环境跨域问题
        proxy: {
          // 一旦devServer(5000)服务器接受到 /api/xxx 的请求，就会把请求转发到另外一个服务器(3000)
          '/api': {
            target: 'http://localhost:3000',
            // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
            pathRewrite: {
              '^/api': '',
            },
          },
        }
    },
    
    mode: 'development', // 开发模式,生产，测试
}