2022-02-01 webpack打包基础

web基础配置项，五大部分，使用commonJS语法，modue.exports={} 导出对象

1. mode 分为development和生成production（生产，代码会压缩）
2. entry 入口js文件，
3. output 出口目录及js文件名字
4. plugins 各种插件，例如vuePlugin，webpack自身不支持的
5. module 模块（代码块），style-loader css-loader less-loader url-loader等

const path = require('path')  // 导入 node.js 中专门操作路径的模块
//导入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//创建对象
const htmlPlugin = new HtmlWebpackPlugin({
    //设置生成预览页面的模板文件
    template: "./src/index.html",
    //设置生成的预览页面名称
    filename: "index.html"
})

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

module.exports = {
    mode: 'development',// mode 用来指定构建模式
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放路径
        filename: 'bundle.js' // 输出文件的名称
    },
    plugins: [htmlPlugin, vuePlugin],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                  // [style-loader](/loaders/style-loader)
                  { loader: 'style-loader' },
                  // [css-loader](/loaders/css-loader)
                  {
                    loader: 'css-loader',
                    options: {
                    // 启用/禁用 CSS 模块及其配置 默认为true，需要改为false 否则class类名会乱码
                      modules: false,
                    //启用/禁用 @import 规则进行处理 默认为true 不需填写
                      import: true
                    }
                  },
                  // [sass-loader](/loaders/sass-loader)
                //   { loader: 'sass-loader' }
                ]
              },
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                loader:"url-loader?limit=16940"
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            }
        ]
    }
}