webpack learn1-初始化项目1
使用Visual Studio Code软件使用准备,先安装一些插件,加快开发效率(还有Language Packs 选择简体中文安装后重启软件,可切换为中文):
下面是项目初始化步骤:
1 软件打开终端:在指定目录输入
npm init
2 再输入
npm i webpack vue vue-loader
3 然后根据提醒warn安装需要的依赖(比如css-loader和vue-template-compiler)
npm i css-loader vue-template-compiler
4 建立文件夹src放源码,在src下建立app.vue文件
在app.vue中输入:
<template> <div id="test">{{text}}</div> </template> <script> export default { data() { return { text: 'abc' } } } </script> <style> #test { color: red; } </style>
在项目目录下建立webpack.config.js文件,内容:)
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: path.join(__dirname,'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname,'dist') }, module: { rules: [ { test: /.vue$/, loader: 'vue-loader' },{ test:/.css$/, loader: ['css-loader'] } ] }, plugins:[ new VueLoaderPlugin() ] }
在src目录下建立index.js文件
import Vue from 'vue' import App from './app.vue' const root = document.createElement('div') document.body.appendChild(root) new Vue({ render: (h) => h(App) }).$mount(root)
在package.json文件中script中增加一行代码: "build": "webpack --config webpack.config.js --mode development"
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js --mode development" }
5 然后在终端输入npm run build
出现错误还有可能需要安装vue-template-compiler
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了