使用webpack创建一个新项目

最新推荐文章于 2024-01-29 14:27:07 发布
原创 最新推荐文章于 2024-01-29 14:27:07 发布 · 1w 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了在Windows环境下，如何通过win+r打开cmd命令行工具，进入目标文件夹，使用npm创建package.json，以及利用webpack创建node_modules，从而完成一个基于npm和webpack的前端项目基础搭建。

  • 使用NPM和webpack创建一个符合前端工程化的项目

    环境windows
    1.win+r 打开cmd命令行工具
    2.进入目标文件夹(项目文件夹),我创建的是webpack-test
    这里写图片描述
    3.使用npm创建package.json文件. 命令 cnpm init (我使用的是cnpm)
    执行需要选择一些基础配置,一路回车就可以
    这里写图片描述
    创建好后项目文件夹中就多了一个package.json文件
    这里写图片描述
    4.使用webpack创建node_modules文件夹
    全局创建webpack cnpm install webpack -g
    在项目中创建 cnpm install webpack --save-dev
    这里写图片描述
    打开项目文件夹,会看到多了一个node_modules文件夹
    这里写图片描述
    到此,一个基于npm和webpack的基础项目就创建好了.

最低0.47元/天 解锁文章
vue使用webpack创建项目的命令
东方佑
05-12 10万+
vue init webpack my_project
webpack从零搭建一个项目
大灰狼的小绵羊哥哥的博客
11-14 1826
前言 最近在做一个关于webpack5手动搭建项目的测试练习，网上找了很多文章，发现很多文章按照他们的步骤搭建，都会有各种各样的报错，于是自己参考网上各类文章，加上自己的实际搭建，完成了这篇文章。如果有错误，欢迎在评论区指出。 时间 2021/09/28 初始化环境 生成package.json yarn init -y 复制代码 安装webpack 和webpack-cli yarn add -D webpack webpack-cli webpack-cli是webpack的命令行工
搭建自己的Webpack项目
gyq04551的博客
06-02 3003
搭建自己的Webpack项目:入门（你所不知道的webpack） 时间 2016-10-27 23:37:23  谢小飞的博客 原文  http://xieyufei.com/2016/10/21/Front-Webpack-First.html 主题 Webpack 作为当下最流行的前端打包工具，webpack有自己无与伦比的优势和功能特性，使用webpack打包自己
创建基于Webpack的Vue.js项目
逆境清醒的博客
03-19 6149
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
使用webpack来构建项目
梁婉玲krysliang的博客
05-20 672
1、在webpack的官网可以看到，webpack是一个文件打包工具，它将复杂的的文件依赖打包成独立的资源文件。换句话说，在webpack里一切文件都是模块，通过loader加载文件，通过plugin注入钩子，最后输出由多个模块组合的文件。那么loader是什么呢？loader用来读取各类资源，比如css、js等。模块loader可以链式调用，链汇总的每个loader都将对资源进行转换，然后将结果传递给下一个loader。 也就是说webpack使用loader来管理各类的资源。 ...
使用webpack搭建一个新项目
qq_41189996的博客
03-03 192
https://blog.youkuaiyun.com/ChasteBlessing/article/details/80435611
Starter:使用webpack等创建新Javascript项目的入门模板
05-17
在webpack.config.js中，将Title的名称从“ Starter”更改为您的新项目名称 在package.json中，将“名称”：“入门”更改为新的项目名称 更改starter.js文件的名称以及main.js文件中的一些位置 npm运行开始 本课中的...
使用angular-cli webpack创建多个包的方法
10-17
当使用angular-cli构建项目时，默认情况下所有的项目文件会被捆绑到一个主包中。这种做法在小规模应用中尚可接受，但在大型应用中会导致初始加载时间增加，因为它需要加载应用的全部代码才能开始运行。为了解决这个...
用npm安装vue和vue-cli,并使用webpack创建项目的方法
10-17
然后，你可以使用这个工具初始化一个新的基于Webpack的项目。例如，创建名为"my-project"的项目，输入`vue init webpack my-project`。在接下来的交互式配置中，你可以根据提示选择项目设置，包括是否使用ESLint、...
使用webpack搭建项目
卑微牛马学习笔记
04-28 1246
学习笔记----使用webpack搭建一个基础的项目
webpack搭建项目
星星月亮的博客
08-17 384
前端构建工具有：1. grunt 2. gulp 3. webpack 4. Fis3（百度）， 其中最常用的就是webpack。。。如何使用webpack搭建项目呢？ 1.webpack的作用 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2.使用w
使用webpack创建vue项目
qq_40931553的博客
04-18 2217
开发环境 在使用webpack创建vue项目时，你需要先将下面开发环境搞定。 安装node.js，查看版本号： node -v 安装npm(或者) npm -v 安装vue-cli脚手架构建工具 vue -v 创建vue项目 进入想要创建项目的目录，右键打开cmd，输入创建命令，my-project为项目的名字，可以自行修改，但是不得包含大写字母。vue init webpack my-pr...
使用webpack创建vue前端项目
weixin_43934513的博客
08-25 525
使用webpack创建vue前端项目 一.安装Node.js 1、由于vue项目是依赖Node.js的，需要安装Node.js。 Node.js官网下载 等待下载完成，双击安装包按步骤即可，这里安装位置为D:/nodejs。 2、执行命令echo %PATH%检查是否存在安装路径。 安装Node.js后，会自带npm。执行node -v和npm -v检查node.js和npm的版本。 3、接下来配置npm的本地仓库。 在nodejs目录下新建两个目录：node_cache 和 node_globa
webpack创建react项目
爪哇犀牛
05-10 487
1.初始化npmnpm init2.引入react react-dom babelify babel-preset-reactnpm install --save react react-dom babelify babel-preset-react3npm install babel-preset-es2015 --save4.创建webpack.config.jsvar debug = pro...
使用webpack进行最简单的项目构建
qwerty053的博客
11-26 938
这些应该是对在官网初学习的一个小总结吧~，大家可以去官网看较为详细的解释： 指南 | webpack 中文网 (webpackjs.com) 那我们话不多说，直接开始： 首先在nodeJs下创建一个webpack-demo文件夹，在其中调用命令行执行： npm init -y npm install webpack webpack-cli --save-dev 修改生成的package.json：删去package.json中的"main":"index.js"，添加"private":true，得
webpack构建项目
smallMosquito的博客
03-20 896
安装webpackwebpack是基于node来构建的1 项目文件的结构  work--------  （先初始化一下npm init -y，得到package.json） dist（项目最终展示的地方） node_modules (依赖的包) src(自己文件所在地)----- css       index.css    index.less    index.scss ...
使用webpack搭建项目开发环境（持续更新）
weixin_43850368的博客
01-29 1517
使用webpack搭建项目
webpack 项目使用--创建webpack 项目（1）
datouniao1的博客
08-05 532
1.新建一个文件夹 假设文件夹的名称为 wdgapp，并且通过命令行到该目录下 2. 初始化项目 npm init -y 3.在wdgapp 文件夹中创建src 文件夹（源代码） 和dist（编译生成文件） 并且在src文件夹中新建index.html 文件和 index.js 文件 编辑index.html: <!DOCTYPE html> <html lang="en"> <head> <me...
【通过webpack自己搭建项目】
regretTAT的博客
06-02 476
webpack是一个用于现代 JavaScript 应用程序的 *静态模块打包工具*。 构建webpack与vue2 vue3的开发环境 vue2 底层打包工具用的就是**webpack** 通过webpack让浏览器支持ES6,node抛出，引入的写法 webpack可以跨端运行（服务端运行，也可以在浏览器端运行）......
webpack创建一个vue项目指令
最新发布
03-22
### 使用 Webpack 构建 Vue 项目的具体步骤 以下是通过 Webpack 创建和配置 Vue 项目的主要流程： #### 1. 初始化项目 首先，在目标目录下初始化一个新的 Node.js 项目。运行以下命令来生成 `package.json` 文件： ```bash npm init -y ``` 这一步会自动生成一个默认的 `package.json` 文件，用于管理依赖项和其他元数据。 --- #### 2. 安装必要的开发工具 为了使用 Webpack 进行打包操作，需要安装 Webpack 及其 CLI 工具作为开发依赖项。可以执行以下命令之一完成安装： ```bash npm install webpack webpack-cli --save-dev ``` 或者如果使用 Yarn，则运行： ```bash yarn add webpack webpack-cli --dev ``` 此步骤中的 `webpack` 是核心打包工具，而 `webpack-cli` 提供了命令行接口支持[^2]。 --- #### 3. 添加 Vue 支持 为了让 Webpack 能够处理 Vue 单文件组件 (`.vue`)，还需要引入额外的支持库以及加载器。这些包可以通过如下方式获取： ```bash npm install vue-loader vue-template-compiler css-loader style-loader babel-loader @babel/core @babel/preset-env --save-dev ``` 其中， - **vue-loader**: 处理 `.vue` 文件； - **vue-template-compiler**: 编译模板语法； - **css-loader & style-loader**: 解析 CSS 并将其注入到 DOM 中； - **Babel** 相关插件：转换现代 JavaScript 特性以便兼容旧版浏览器[^4]。 --- #### 4. 配置 Webpack 在根目录创建名为 `webpack.config.js` 的配置文件，并定义基础规则。下面是一个简单的例子： ```javascript const path = require('path'); module.exports = { entry: './src/main.js', // 主入口文件路径 output: { filename: 'bundle.[contenthash].js', path: path.resolve(__dirname, 'dist') // 输出目录位置 }, module: { rules: [ { test: /\.vue$/, // 匹配 .vue 文件 loader: 'vue-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] // 加载样式资源 }, { test: /\.(png|jpe?g|gif)$/i, type: 'asset/resource' // 图片等静态资产处理 } ] }, resolve: { alias: { '@': path.resolve(__dirname, 'src') // 设置别名简化导入语句 }, extensions: ['.js', '.vue', '.json'] }, devServer: { contentBase: './dist', // 开发服务器的基础目录 hot: true // 启用热更新功能 } }; ``` 上述代码片段设置了多个模块解析规则，包括对 Vue 组件、CSS 样式表以及其他媒体类型的处理逻辑[^1]。 --- #### 5. 修改 package.json 增加脚本命令 编辑现有的 `package.json` 文件，向 `"scripts"` 字段添加两个常用的任务指令： ```json { "scripts": { "serve": "webpack serve --open", "build": "webpack" } } ``` 这样就可以分别通过 `npm run serve` 来启动本地服务预览应用效果；利用 `npm run build` 执行正式环境下的编译工作[^3]。 --- #### 6. 测试与部署 最后验证整个流程是否正常运作——确保能够成功访问页面并且所有功能均按预期表现良好之后再考虑上线事宜。 --- ### 总结 以上即为基于 Webpack 实现 Vue 应用程序构建的整体方案概述。它涵盖了从零开始搭建直至最终产出可交付成果所需经历的关键环节。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值