webpack4手把手教你搭建vue项目

82 浏览量更新于2024-09-04 收藏 74KB PDF 举报

"这篇教程详细介绍了在9102年使用webpack4搭建Vue项目的步骤，适合初学者和希望深入理解webpack配置的开发者。通过实践，读者将了解到如何从零开始创建一个Vue项目，包括初始化项目、安装依赖、配置webpack以及创建基本的HTML入口文件。" 在2019年（9102年是网络用语，表示2019年的意思），使用webpack4搭建Vue项目是前端开发中的常见任务。Vue.js是一个轻量级但功能强大的前端框架，而webpack则是一个模块打包工具，能够处理和打包JavaScript应用的各种依赖。本教程旨在帮助开发者了解如何不依赖vue-cli，直接使用webpack配置Vue项目。首先，你需要新建一个名为`webpackconfig`的文件夹，这是项目的基础结构。接着，使用`npm init -y`在该文件夹内生成`package.json`，这是项目的基本配置文件。然后，安装必要的依赖包，包括`webpack`、`webpack-dev-server`和`webpack-cli`，这些是webpack的核心组件，`webpack-dev-server`用于提供热加载和本地开发环境，`webpack-cli`则是webpack的命令行接口。在`src`文件夹内创建`main.js`，这是项目的入口文件，通常会包含Vue实例的创建。例如，你可以写入`alert(1)`这样的简单代码以验证文件是否正确引入。同时，你需要创建`webpack.config.js`，这是webpack的配置文件，定义了项目如何被构建。配置文件中，`entry`字段指定了项目的入口点，`output`字段定义了编译后的文件位置和命名规则，`publicPath`则用于指定静态资源的URL路径。例如，以下是一个简单的`webpack.config.js`配置示例： ```javascript var path = require('path'); var config = { entry: './src/main.js', output: { path: path.resolve(__dirname, '/dist'), // 打包生成文件地址 filename: '[name].build.js', // 生成文件名 publicPath: '/dist/' // 文件输出的公共路径 } }; module.exports = config; ``` 最后，创建一个`index.html`文件作为项目的入口HTML，引入`main.js`，确保浏览器能够正确加载和执行你的Vue应用。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue项目</title> </head> <body> <script src="/dist/main.build.js"></script> </body> </html> ``` 通过以上步骤，你就成功地使用webpack4搭建了一个基础的Vue项目。当然，实际项目中可能还需要考虑更多配置，如处理CSS、图片、字体等静态资源，设置loader和plugin，以及优化构建过程等。不断学习和实践，你将能够熟练掌握webpack和Vue的结合使用。

9102年年webpack4搭建搭建vue项目的方法步骤项目的方法步骤

主要介绍了9102年webpack4搭建vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者

工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言前言

首先祝大家元宵节快乐，最近已经好久没有写过文章了，刚好趁着这几天刚刚上班，领导还没有来，偷偷的写一篇关于

webpack搭建vue的博客。因为公司使用vue比较多，构建vue项目使用vue-cli显得有点臃肿，感觉还是自己配置比较好些，所

以就有了这篇教程。由于水平有限，欢迎大家指正，一起进步。

新建项目新建项目

1.新建名为webpackconfig文件夹

2.使用命令

npm init -y

在webpackconfig文件夹中生成package.josn

3.下载依赖包

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

4.新建src文件夹并在src中创建main.js文件

alert(1)

5.新建webpack.config.js文件

webpack.config.js文件

var path = require('path');

var config = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname + '/dist'),//打包生成文件地址

filename: '[name].build.js',//生成文件ming

publicPath: '/dist/'//文件输出的公共路径

}

module.exports = config;

entry: 引入文件，对象写法可以引入多文件

entry: {

app: './src/app.js',

vendors: './src/vendors.js'

}

output：文件输出地址

path: 输出文件地址

filename：输出文件名

publicPath：文件输出路径

6.新建一个index.html文件并引入main.js

<!DOCTYPE html><html lang="en">

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

7.配置package.json

下载后可阅读完整内容，剩余4页未读，立即下载

weixin_38655484

粉丝: 4
资源: 909

webpack4手把手教你搭建vue项目

webpack搭建vue项目总结.md

webpack4整合vue

webpack4 搭建 vue 项目

webpack搭建的vue怎么配置@/

使用webpack搭建vue2项目

webpack打包vue项目

webpack搭建vue脚手架

常见的webpack层面vue项目优化

如何使用webpack5搭建一个支持vue3的项目

使用webpack创建Vue项目步骤

最新资源