Webpack项目学习：开始搭建和Vue-cli（脚手架）-开发模式配置

使用vue Loader编译vue单文件组件介绍 | Vue Loader (vuejs.org)帮助实现js vue热模块替换功能

下载组件-初始化配置

npm init -y

下载包文件组件

npm install -D vue-loader vue-template-compiler

配置config文件

"vue-style-loader",//将js中css通过创建style标签添加到html中

jsx--js

删除hmr功能

下载依赖

npm i vue-style-loader css-loader postcss-loader postcss-preset-env -D

npm i less-loader sass-loader stylus-loader babel-loader -D

npm i webpack webpack-cli webpack-dev-server -D 

eslint bable指示文件

 

npm i @vue/cli-plugin-babel -D

尝试打包vue文件

安装vue:

npm i vue

配置要打包的文件；

 

 

 

 下载

npm i cross-env -D
npm i eslint-webpack-plugin -D
npm i eslint-plugin-vue -D

运行报错了：在内部定义 环境变量

Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle. 

const { DefinePlugin } = require("webpack");

   //定义cross_env定义环境变量给打包工具属于
        //DefinePlugin定义环境变量给源代码使用 从而解决vue3警告问题

new DefinePlugin({
            __VUE_OPTIONS_API__: "true",
            __VUE_PROD_DEVTOOLS__: "false",
          }),

 检HMR功能有没有：--加组件

 

 

 然后导入到入口文件

 改变样式 --有HMR功能 

 配置代码

//ESLint先引入
const ESLintPlugin = require('eslint-webpack-plugin');
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
//处理单文件组件
const { VueLoaderPlugin } = require("vue-loader");
//定义环境变量 处理报错问题
const { DefinePlugin } = require("webpack");
const getStyleLoaders = (preProcessor) => {
    return [
        "vue-style-loader",//将js中css通过创建style标签添加到html中
        "css-loader",// //该模块将css资源编译成commonjs的模块到js中
        {//考虑兼容性问题-配合packafe.json中的browserslist来指定兼容性
            loader: "postcss-loader",
            options: {
                postcssOptions: {
                    plugins: [
                        "postcss-preset-env", // 能解决大多数样式兼容性问题
                    ],
                },
            },
        },
        preProcessor,
    ].filter(Boolean);
}
module.exports = {
    // 入口
    entry: "./src/main.js",// 相对路径和绝对路径都行 由于运行是在外面运行的所以不需要改变
    // 输出
    output: {// 必须绝对路径
        // filename: 输出文件名
        filename: "static/js/[name].js",
        //给打包输出的文件命名-动态导入
        chunkFilename: 'static/js[name].chunk.js',
        // 图片、字体等资源命名方式（注意用hash）
        assetModuleFilename: "static/media/[name].[hash:10][ext][query]",
    },
    // 加载器-帮助识别不能识别的内容
    module: {//loader规则
        rules: [
            
                //每个文件只能被其中一个loader配置处理
                    {
                        //css处理
                        test: /\.css$/i, // 用来匹配 .css 结尾的文件
                        use: getStyleLoaders(),
                    },
                    {
                        test: /\.less$/i, // 用来匹配 .less 结尾的文件
                        //loader:"xxx"只能使用1个loader
                        use: getStyleLoaders("less-loader"),
                    },
                    {
                        test: /\.s[ac]ss$/i,
                        use: getStyleLoaders("sass-loader"),
                    },
                    {
                        test: /\.styl$/,
                        use: getStyleLoaders("stylus-loader"),
                    },
                    //处理图片
                    {
                        test: /\.(png|jpe?g|gif|webp|svg)/,
                        type: 'asset',//asset会转base64
                        parser: {//图片优化
                            dataUrlCondition: {
                                //小于10ke图片转base64
                                //优点：减少请求数量 缺点：体积会更大
                                maxSize: 10 * 1024 // 10kb
                            }
                        },
                    },
                    {//处理其他资源
                        test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则
                        type: "asset/resource",//不会转，原封不动输出
                    },
                    {
                        test: /\.jsx?$/,//处理的文件js+jsx
                        include: path.resolve(__dirname, "../src"), //只处理src文件
                        use: [
                            {
                                loader: "babel-loader",//只用一个
                                //提升性能
                                options: {
                                    cacheDirectory: true, // 开启babel编译缓存
                                    cacheCompression: false, // 缓存文件不要压缩，压缩需要时间 

                                },
                            },//这里不考虑多线程
                        ]
                    },
                    
                    // vue-loader不支持oneOf
                    {
                        test: /\.vue$/,
                        loader: "vue-loader", // 内部会给vue文件注入HMR功能代码
                    },
               
            ],
    },
    // 插件-扩展功能
    plugins: [
        //检查eslint
        new ESLintPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules", // 默认值-排除不处理
            cache: true, // 开启缓存
            // 缓存目录
            cacheLocation: path.resolve(
                __dirname,
                "../node_modules/.cache/.eslintcache"
            ),
        }),
        //处理html资源 自动引入
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建新的html文件
            // 新的html文件有两个特点：1. 内容和源文件一致 DOM结构 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),

        new VueLoaderPlugin(),
        //定义cross_env定义环境变量给打包工具属于
        //DefinePlugin定义环境变量给源代码使用 从而解决vue3警告问题
        new DefinePlugin({
            __VUE_OPTIONS_API__: "true",
            __VUE_PROD_DEVTOOLS__: "false",
          }),
    ],

    // 开发服务器-自动编译
    devServer: { // 开发服务器不会输出资源，再内存编译中打包
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要了）
    },
    // 模式
    mode: "development",// 开发模式
    devtool: "cheap-module-source-map",//设置调试更加友好
    //代码分割
    optimization: {
        splitChunks: {
            chunks: "all",
        },
        runtimeChunk: {//会导致缓存失效-处理
            name: (entrypoint) => `runtime~${entrypoint.name}`,
        },
    },
    // 开发服务器-自动编译
    // eslint-disable-next-line no-dupe-keys
    devServer: { // 开发服务器不会输出资源，再内存编译中打包
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
        hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要了）
        historyApiFallback: true, // 解决react-router刷新404问题
    },
    //webpack解析模块加载选项
    resolve: {
        //自动补全文件扩展名-.vue
        extensions: ['.vue', '.js', '.json']
    }
};

---

vue前端路由功能演示-下载组件chu

npm i vue-router -D

 创建路由模块

 创建之后挂载之前使用路由

 router-link实现路由跳转