傻瓜式学习webpack（一）——建立项目

最新推荐文章于 2023-05-06 03:46:15 发布
最新推荐文章于 2023-05-06 03:46:15 发布
阅读量906 收藏 2
点赞数
分类专栏： webpack 文章标签： webpack webpack react webpack依赖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Selina_Chan/article/details/78426315
版权

一、首先，新建一个工程，如testTest，并在该工程的根目录下新建一个package.json文件，这个时候，package.json文件是空的；


二、cd到testTest目录下，执行npm init，对于package的信息设置你可以一直按回车，直至让你确认yes，这个时候，你再去查看package.json文件，发现它已经写入了相关的信息；


三、然后你再在该工程下执行 npm install webpack ，进行webpack的下载，下载成功后，在package.json可以看到具体依赖的webpack的信息；同时，目录下还自动生成package-lock.json。具体干嘛用的，我也不知道，哈哈哈哈。那么反正第一步就算完成了~


不知道为什么截图出不来了，只能默默地改成纯文本描述了！！！！！！这里丢个链接给大家：


AryaoO
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用webpack搭建项目
weixin_39963132的博客
11-09 2987
最近在学react和webpack，语言本身并没有感觉难，就是前边的准备步骤比较繁琐浪费了一些时间，本来想上周写，无奈还要写论文，只好拖到了今天，下面将分享一下从建文件夹到后续的整个步骤供大家参考一下。（希望能经常更博，不要拖延~~~） 1、新建一个空文件夹test。 2、在命令行中进入该文件夹。（test文件夹在f盘中，所以需要先从c盘进入到f盘，再执行cd命令进入到指定文件夹） 3、...
傻瓜式学习webpack（六）——一个项目多个webpack
Selina_Chan的博客
11-08 904
webpack-gulp,webpack-loaders资料分享 webpack的配置文件并没有固定的命名，也没有固定的路径要求，如果你直接用webpack来执行编译，那么webpack默认读取的将是当前目录下的webpack.config.js 如果你有其它命名的需要或是你有多份配置文件（比如你可以配置 webpack.base.conf.js、webpack.dev.conf.jswebpack.prod.conf.js三个环境的webpack），
1.webpack创建项目
少年闰土
03-01 431
我们通过简单的使用 webpack 一步一步的实现搭建一个完整的项目，逐步理解前端的开发不再是简单的 html +css + javascript 脚本，而是系统的，架构的开发模式；就跟后端开发一样，开始规范化了；后面很多地方都可以对比后端的开发模式，你会发现有很多类似的地方！Webpack 是一个前端资源加载/打包工具；它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源；官网地址：https://webpack.docschina.org/；
用webpack搭建项目
weixin_39065287的博客
04-02 162
1、创建项目文件夹mkdir webDemo cd webDemo 2、npm init -y初始化packge.json 3、安装webpack、babel以及基础loader npm i webpack webpack-cli @babel/core @babel/preset-env @babel/plugin-transform-runtime babel-loader @babel/p...
webpack创建一个项目(2)
qq_44875145的博客
02-03 156
一.基础知识 css和js压缩 css压缩 1.执行命令 npm install --save optimize-css-assets-webpack-plugin 2.在webpack.config.js中配置 let OptimizeCss=require('optimize-css-assets-webpack-plugin'); //css压缩 module.exports={ //优化项启动后mode模式代码压缩不再生效,必须配置js压缩插件 optimization:{ minimizer
webpack进阶——缓存与独立打包的用法
12-12
本文介绍了webpack进阶——缓存与独立打包的用法，分享给大家，希望对大家有帮助 先来看看最基础的webpack配置： var path = require('path'); module.exports = { entry: './src/index.js', output: { filename...
webpack转内联px为rem_webpack系列——实现一个行内样式px转vw的loader
weixin_39615741的博客
12-20 786
需求自从有了postcss来处理css文件，我们可以快速进行网站适配的开发，只需要改改参数，样式按照设计稿的px写，webpack编译自动转换成rem或者vw等。但是，标签内的px怎么办呢？postcss并不提供转换这个的功能。探索启动思路我正在做一个vue项目，刚好想要实现上面提到的需求，例如下面的例子Test我希望他能根据我设置的基准值自动转换成vw。Test要想实现这样一个东西，离不开编译工...
傻瓜式学习webpack（五）——css的抽离和html的自动引入js/css
Selina_Chan的博客
11-08 5326
一、以前面四篇文章为基础，我们接下来利用webpack进行css的抽离。这里需要安装一个插件。在安装之前，首先要说明一下，如果没有第四篇文章为前提，也就是图片没有进行处理的话，在抽离css的时候，它将无法解析css中的url，所以在抽离之前，一定要进行图片处理。 接下来开始干活。首先安装 extract-text-plugin插件。然后我们修改webpack.config.js文件，修改后如下：
webpack搭建项目
星星月亮的博客
08-17 300
前端构建工具有：1. grunt 2. gulp 3. webpack 4. Fis3（百度）， 其中最常用的就是webpack。。。如何使用webpack搭建项目呢？ 1.webpack的作用 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2.使用w
webServices傻瓜开发教程
10-19
webServices 开发教程,最简单的开发说明文档
html傻瓜式教程----html入门
09-16
讲解得很不错的一个html教程,将html的基本知识都说透了,希望能让大家从中学到一些东西吧
傻瓜式免费自助建站系统
02-08
是一款由asp.net开发傻瓜式免费自助建站系统，下载后上传到你主机上，注意主机需要支持asp.net，此程序为站长站推荐的，本人亲自使用后感觉很经典就发出来分享的。 程序功能： 1.系统管理，包括网站一些标题，描述，底部等设置 2.栏目管理，可以自由增加栏目，模块，子栏目等等 3.信息系统(文章，产品，图片，下载，招聘，留言等等都可以实现） 4.会员功能，注册，登录，投稿，签发，签收信息都可以 5.自定义表单，自定义模型，这个很赞的功能，会用后基本无敌了 6.业务管理，包括订单，审核，信息恢复，财务查看等等 7.很多其他的相关功能，总之很强大。 下载后有不懂的上官方论坛去咨询，那里版主很积极，感觉好的记得给个赞。
搭建自己的Webpack项目
gyq04551的博客
06-02 2925
搭建自己的Webpack项目:入门（你所不知道的webpack） 时间 2016-10-27 23:37:23  谢小飞的博客 原文  http://xieyufei.com/2016/10/21/Front-Webpack-First.html 主题 Webpack 作为当下最流行的前端打包工具，webpack有自己无与伦比的优势和功能特性，使用webpack打包自己
创建基本的webpack项目
qq_38721353的博客
01-04 205
创建一个webpack项目步骤如下： 创建一个文件夹，给文件夹取一个名称，在这里文件夹的名称为webpack 进入该文件夹打开cmd，输入npm init -y，初始化项目 在项目根目录创建src源代码目录(文件夹）和dist产品目录(文件夹），选择一款合适的IDE打开项目 在src目录下创建index.html 安装需要的包：webpack,webpack-cli， 安装命令为nmp i webpack webpack-cli -D，这条命令为局部安装，也就是说安装路径在项目的文件
webpack 项目使用--创建webpack 项目（1）
datouniao1的博客
08-05 464
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的Vue.js项目
逆境清醒的博客
03-19 4787
创建基于Webpack的Vue.js项目。一、Webpack简介。二、创建基于Webpack的Vue.js项目 1、前提条件(检查node和npm版本信息,升级你的 Node 版本)。2、安装Webpack、Vue.js。 3、创建基于Webpack的Vue.js项目。三、Webpack下的Vue.js项目文件结构。四、打开Vue项目管理器
使用webpack/脚手架搭建项目
最新发布
qq_41994396的博客
05-06 388
创建一个 webpack.config.js 的配置文件用来配置webpack。补充：安装sass-loader失败时，大部分情况是因为网络原因。打开main.js,添加引入element-ui组件的代码，如下。安装自动打包功能的包:webpack-dev-server。打开App.vue，添加element-ui组件。打开App.vue，添加路由链接。
如何使用webpack搭建一个项目
03-24
使用webpack搭建一个项目的步骤如下： 1. 安装Node.js和npm； 2. 在项目根目录下运行npm init命令，创建一个package.json文件； 3. 安装webpack和webpack-cli：npm install webpack webpack-cli --save-dev； 4. 创建一个webpack.config.js文件，配置webpack的入口、出口、loader和plugin等； 5. 在package.json中添加scripts，如"build": "webpack --config webpack.config.js"，以便运行webpack命令； 6. 运行npm run build命令，即可打包项目。 注意：以上是webpack的基本使用方法，具体配置和使用方法需要根据项目需求进行调整。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值