使用webpack

首先文件夹vue-loader-demo

<!-- 简单的目录结构 -->
<!-- |-index.html
|-main.js       入口文件
|-App.vue       vue文件
|-package.json  工程文件(项目依赖、名称配置)
npm init --yes 生成
|-webpack.config.js   webpack配置文件 


---------------------------------------------------------
webpack下载
npm install webpack webpack-dev-server
引入模块:
import 模块名 from 地址


App.vue    ----->变成正常代码   vue-loader@8.5.4
cnpm install vue-loader@8.5.4 --save-dev
cnpm install vue-html-loader --save-dev









-->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
作为一个新手使用Webpack,你可以按照以下步骤进行配置和使用: 1. 安装Webpack: 通过npm或yarn安装Webpack。在你的项目根目录下运行以下命令: ``` npm install webpack webpack-cli --save-dev ``` 2. 创建Webpack配置文件: 在项目根目录下创建一个名为`webpack.config.js`的文件,并添加以下内容: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, }; ``` 这个配置文件定义了入口文件和输出文件的路径。 3. 创建入口文件: 在`src`目录下创建一个名为`index.js`的文件,这将是你应用的入口点。 4. 编写你的代码: 在`index.js`中编写你的应用代码。 5. 运行Webpack: 打开终端,导航到项目根目录,并运行以下命令: ``` npx webpack ``` 这将使用Webpack根据你的配置文件生成一个打包后的文件,并将其输出到`dist/bundle.js`。 6. 在HTML中引入打包后的文件: 在你的HTML文件中引入打包后的文件: ```html <script src="dist/bundle.js"></script> ``` 7. 运行应用: 打开你的HTML文件,并在浏览器中运行你的应用。 这是一个简单的Webpack配置和使用的例子。你可以根据你的需求进一步了解和配置Webpack,例如添加加载器、插件等。Webpack的官方文档提供了更详细的配置选项和用法说明,可以作为你深入学习的资源。祝你使用Webpack顺利!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值