Webpack打包vue项目

这篇具有很好参考价值的文章主要介绍了Webpack打包vue项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

步骤一:

创建一个vue项目

vue create 项目名称

在项目里打开终端

步骤二:

初始化npm项目,创建一个package.json文件

npm init -y
步骤三:

修改package.json

"scripts": {
    "build": "webpack --config webpack.config.js"
  },
步骤四:

npm安装Webpack

npm install --save-dev webpack webpack-cli
步骤五:

在项目根目录下创建一个名为webpack.config.js的文件

const { VueLoaderPlugin } = require('vue-loader');  // 引入 VueLoaderPlugin
const path = require('path');   // 引入路径模块
​
module.exports = {
  mode: 'development',  // 设置模式为开发模式,可以设置为 'production' 以+++++++++
  //启用压缩等优化
  entry: './src/main.js',    // 设置入口文件为 './src/main.js'
  output: {
    // 设置输出目录为 path.resolve(__dirname, //'dist')
    path: path.resolve(__dirname, 'dist'),  
    filename: 'bundle.js'   // 设置输出文件为 'bundle.js'
  },
  // 配置模块加载规则
  module: {
    rules: [
      {
        // 匹配 .vue 文件,使用 vue-loader
        test: /\.vue$/,// 文件后缀名的匹配规则
        loader: 'vue-loader'// 定义了不同模块对应的 loader
      },
      {
        // 匹配 .js 文件,使用 babel-loader,排除 node_modules
        test: /\.js$/,// 文件后缀名的匹配规则
        loader: 'babel-loader',// 定义了不同模块对应的 loader
        exclude: /node_modules/     // 排除
      },
      {
        // 匹配 .png 文件,使用 file-loader
        test: /\.png$/,// 文件后缀名的匹配规则
        use: 'file-loader'//定义了不同模块对应的 loader
      },
      {
        // 匹配 .css 文件,使用 vue-style-loader 和 css-loader
        test: /\.css$/,// 文件后缀名的匹配规则
        // 定义了不同模块对应的 loader
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  // 配置插件
  plugins: [
    new VueLoaderPlugin()   // 创建 VueLoaderPlugin 实例
  ],
  // “resolve” 是 webpack 配置中的一个核心选项,用于配置模块解析的规则和设置模块解析的行为。它提供了一//系列的属性,包括 “alias”、“extensions” 等,用于指定模块的解析规则。
  resolve: {    //配置模块解析的规则和设置模块解析的行为
    alias: {    //表示别名配置的属性
      'vue$': 'vue/dist/vue.esm.js' //为' vue别名设置解析路径为 'vue/dist/vue.esm.js'
    },
    //表示支持扩展名的属性
    extensions: ['*', '.js', '.vue', '.json']
  },
};

这个配置文件设定了入口文件、输出路径、模块解析规则以及插件使用

步骤六:

这行代码的意思是安装 Vue.js 的一个加载器库,名为 vue-loader,版本为 15.9.8。

npm install vue-loader@15.9.8

这行代码的意思是安装一个名为 @amap/amap-jsapi-loader 的库,并将其保存到 package.json 文件中

npm i @amap/amap-jsapi-loader --save
步骤七:

安装其他必要依赖,为了让Webpack能够理解vue-loader babel-loader file-loader style-loader css-loader

npm install --save-dev vue-loader babel-loader file-loader style-loader css-loader vue-template-compiler
步骤八:

使用Webpack打包的库默认会将模块暴露为全局变量,因此无法使用import语法引入

src——>views——>homeview.vue里的import导入的那句删掉

运行打包命令:文章来源地址https://www.toymoban.com/news/detail-812640.html

npm run build

到了这里,关于Webpack打包vue项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案一:编译项目时动态生成一个记录版本号的文件

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 编译项目时动态生成一个记录版本号的文件 轮询(20s、自己设定时间)这个文件,判断版

    2024年02月02日
    浏览(64)
  • Webpack打包arcgis js api 3.x纯html+JS+CSS项目

    小项目。纯HTML+JS+CSS已经部署上线,但是没有做混淆加密,需要进行混淆加密 目前代码里面需要混淆加密的有main.js,其他的不用混淆加密。所以只需要对main.js进行混淆加密就可,但是要保证混淆加密之后能够访问方法。 由于目前在index.html的script使用import导入main.js里面的方

    2024年02月11日
    浏览(62)
  • 十五、Webpack打包图片-js-Vue、Label命令、resolve模块解析

    为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两种: img元素,设置src属性; 其他元素(比如div),设置background-image的css属性; 这个时候我们打包会报错: 我们当前使用的webpack版本是webpack5: 在webpack5之前,加载这些资源我

    2024年02月09日
    浏览(40)
  • 前端项目部署自动检测更新后通知用户刷新页面(前端实现,技术框架vue、js、webpack)——方案二:轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

    当我们重新部署前端项目的时候,如果用户一直停留在页面上并未刷新使用,会存在功能使用差异性的问题,因此,当前端部署项目后,需要提醒用户有去重新加载页面。 vue、js、webpack 根据打完包之后生成的 script src 的hash值去判断 ,每次打包都会生成唯一的hash值,只要轮

    2024年01月23日
    浏览(44)
  • 如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件

    ◼️ webpack.config.js文件没有的原因 Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js。 vue-cli3 之后创建的时候并不会自动创建 vue.config.js,因为这个是个可选项,所以一般都是需要修改 webpack 的时候才会自己创建一个 vue.config.js。 vue-cil3之后创建项目后的目录结构如下

    2024年02月04日
    浏览(59)
  • 【python】webpack是什么,如何逆向出webpack打包的js代码?

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年03月25日
    浏览(60)
  • Webpack打包简单的js文件

    初始化一个新的npm 步骤一: 初始化npm项目,创建一个package.json文件 步骤二: 添加打包脚本:在 scripts 部分添加一个命令来运行webpack 步骤三: 安装Webpack 步骤四: 创建一个简单的Javascript文件,比如 src/index.js 步骤五: 配置Webpack,创建一个名为 webpack.config.js 的文件 步骤六

    2024年01月24日
    浏览(37)
  • 【前端】webpack打包去除console.log

    需要在打包的时候,自动地去除掉所有console.log 也可以用 if(process.env.NODE_ENV === \\\'production\\\'){} 之类的条件判断包起来,打包的时候生产环境自动去掉console.log测试环境保留

    2024年02月09日
    浏览(40)
  • 06 基于Vue+Vue-cli+webpack搭建渐进式高可维护性前端实战项目

         本文是专栏《 Vue + SpringBoot前后端分离项目实战 》的实战第一篇,将从Vue脚手架安装开始,逐步带你搭建起一套管理系统所需的架构。当然,在默认安装完成之后,会对文件目录进行初步的细化拆分,以便后续 功能迭代和维护 所用。 为兼顾大多数计算机毕设的需求,

    2024年02月16日
    浏览(47)
  • 第三节:Node.js 之 Webpack 打包

    官网网址:https://webpack.docschina.org/ 减少文件数量,缩减代码体积,提高浏览器打开速度。 用于分析、并打包代码。支持所有类型文件的打包,其本质是一个第三方模块包。 初始化包环境 安装依赖包 配置package.json 的 scripts(自定义命令) 在根目录下新建 src 文件夹, 所有要

    2024年02月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包