使用vue Loader编译vue单文件组件介绍 | Vue Loader ()帮助实现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 -Dnpm i eslint-webpack-plugin -Dnpm 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");//处理htmlconst 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个loaderuse: 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会转base64parser: {//图片优化dataUrlCondition: {//小于10ke图片转base64//优点：减少请求数量 缺点：体积会更大maxSize: 10 * 1024 // 10kb}},},{//处理其他资源test: /\.(ttf|woff2|map4|map3|avi?)$/,//针对文件类型，正则type: "asset/resource",//不会转，原封不动输出},{test: /\.jsx?$/,//处理的文件js+jsxinclude: 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: [//检查eslintnew 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-keysdevServer: { // 开发服务器不会输出资源，再内存编译中打包host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true,//开启HMR功能（只能用于开发环境，生产环境不需要了）historyApiFallback: true, // 解决react-router刷新404问题},//webpack解析模块加载选项resolve: {//自动补全文件扩展名-.vueextensions: ['.vue', '.js', '.json']}};
vue前端路由功能演示-下载组件chu
npm i vue-router -D
创建路由模块
创建之后挂载之前使用路由
router-link实现路由跳转
