webpack 安装和基本使用

最新推荐文章于 2021-11-10 16:17:12 发布
最新推荐文章于 2021-11-10 16:17:12 发布
阅读量351 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39992641/article/details/102680202
版权
这篇博客介绍了如何安装和使用webpack，包括全局安装webpack-cli，局部安装webpack-dev-server，并通过npm run dev启动开发服务器。强调了webpack-dev-server打包的bundle.js文件存在于内存中而非物理磁盘。还讨论了webpack默认只能处理js文件，需要通过安装style-loader和css-loader来处理css文件，并详细说明了添加loader的过程。最后提到了处理图片文件时，需要安装相关loader并配置输出路径。
摘要由CSDN通过智能技术生成

npm install webpack-cli -g 安装webpack

使用webpack-dev-server实现自动打包编译的功能
1.cnpm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2.安装完毕后这个工具的用法个webpack的一样
3.如果是本地安装的 webpack-dev-server 所以无法把他当做脚本命令在命令行直接运行(只有那些安装到全局 -g的工具 才能在终端中正常执行)
4.注意 webpack-dev-server这个工具如果想要正常运行,要求:在本地项目中,必须安装webpack
5.打开 npm run dev 前提是要在package.json里面写上dev
意思就是用dev来代替dev里面的内容

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "clean-webpack-plugin&#
最低0.47元/天 解锁文章
戴**
关注
专栏目录
webpack的安装与基本使用
weixin_47356255的博客
05-11 375
webpack中文官方文档 一、webpack的基本配置 运行 npm install webpack webpack-cli -D 命令安装webpack 相关的包 在项目的根目录中，创建名为webpack.config.js的webpack配置文件 在webpack的配置文件中，初始化如下基本配置： module.exports={ //编译模式 mode:'development' //development表示开发阶段 production表示生产阶段 } 在package.json配置文
Webpack的安装和使用
越努力越幸运的博客
10-09 208
Webpack的安装和使用 打开cmd，使用指令npm i webpack webpack-cli -g进行下载即可。 在Webpack中，万物皆模块，js、css、图片等等在webpack中，我们都可以看成是一个模块。 现在我们来简单地使用我们的webpack。 写代码前，我们先看一下最终的目录结构吧： 首先我们写一个要被引用的hello.js文件： exports.sayHello = function(){ document.write("<div>Hello Webpack!&lt
webpack 安装和使用
farmerXU的博客
09-23 175
（1）全局安装后，应该都是最新版的，搜索之后说是新版本的指令有所不同 npm install webpack -g npm install webpack-cil -g 我的版本图： （2）然后输入上面这句进行打包(把mian.js打包到dist里面) webpack ./src/main.js -o ./dist （3）webpack.config.js（下面是我配置文件） const path = require('path') module.exports = { entry: path.
webpack的安装步骤和使用
xiamocsdn的博客
06-04 282
1、建立一个空的项目文件夹； 2、终端cd定位到该文件夹； 3、sudo cnpm init -y 「初始化一个json文件」 4、sudo cnpm install -D webpack 「安装webpack」 5、sudo cnpm install -D webpack-cli 「安装webpack-cli」 6、在项目根目录下创建文件夹src【放置项目源文件】、dist【打包后的文件会在这里...
webpack——基本安装(一)
qq_20464593的博客
05-23 207
webpack基本安装 首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack） npm init -y npm install webpack webpack-cli --save-dev 创建以下目录结构、文件和内容： src/header.js function Header() { var dom = document.getElementById("root") var header =
Webpack:webpack的基本使用，版本是个坑
05-12
webpack app 存放原始数据和书写JavaScript模块 public 存放准备给浏览器读取的数据(包括webpack生成的打包后的js文件...注意使用sass是需要安装依赖包 node-sass //在项目下，运行下列命令行 npm install --save-dev
vue和webpack安装命令详解
08-27
3. **局部安装Webpack**：对于实际项目，通常会在项目内部安装Webpack和其依赖： ``` cd my-project npm install webpack webpack-cli --save-dev ``` 如果需要使用Webpack Dev Server，还需安装： ``` npm ...
webpack安装和基本构建
小青蛙的博客
06-11 759
webpack指南梳理学习 - 安装和基本构建 导读 webpack是前端开发过程中使用超多，用户量超广的一款前端开发打包编译工具，用起来让你欲罢不能，爱不释手。作为目前最火的打包工具，它又是如何使用工作的呢？接下来，我们来通过官网的指南学习梳理webpack的基础知识，掌握webpack的常用功能知识点 webpack安装 前提 在学习之前，我相信你们已经基本掌握前端的相关基础知识点，而且本地电...
webpack的安装和基本使用
qq_38888512的博客
12-29 233
初始化根目录： npm init 然后一路按回车，为了方便生成packge.json的文件，为后续方便配置使用的webpack命令。 安装： npm i -D webpack webpack-cli webpack仅在开发阶段使用，所以安装的时候加上-D参数，只作为开发阶段的依赖。 打包构建： npx webpack webpack的默认入口文件为根目录的./src/index.js文件，出口文件为根目录的./dist/,打包好的文件都会放着这个目录下边。 如果要修改入口和出口的目录可以在根目录新建一
webpack基础使用，以及搭建安装
weixin_47485418的博客
11-18 119
一、什么是Webpack Webpack是一个前端资源加载/打包工具，他将根据模块的依赖关系进行静态分析，然后讲这些模块按照指定的规则生成对应的静态资源。 sass gulp转换成css文件 一个页面很多个js文件，维护只能加 轻易不能删 页面的优化，js/html/css文件的压缩，图片压缩 webpack的特点？ js依赖9进行整合处理（打包整合） 一些预处理的sass，less可以在环境中进行编译（转换） 可以对js、html、图片等进行压缩（优化） webpack的核心？ entry 入口文件
webpack基本使用及其安装包
Sole_Memory1的博客
10-23 296
1.webpack的基本使用 A.创建项目目录并初始化 创建项目，并打开项目所在目录的终端，输入命令： npm init -y B.创建首页及js文件 在项目目录中创建index.html页面，并初始化页面结构：在页面中摆放一个ul，ul里面放置几个li 在项目目录中创建js文件夹，并在文件夹中创建index.js文件 C.安装jQuery 打开项目目录终端，输入命令: ...
webpack安装与基本使用
qq_41305315的博客
06-02 129
首先安装nodejs，nodejs自带npm包，这我就不说了，直接去官网下载就好了 打开cmd，输入npm install webpack -g（我这里是全局安装） 安装webpack-cli（如果还需安装其他也可，如vue-cli） npm install -g webpack-cli//全局安装webpack-cli （我就只安装了这两个，我看网上还安装了好多东西，我觉得我暂时用不到就...
1、webpack基本配置
2024路在何方
02-01 769
webpack安装 安装本地webpack 安装webpack、webpack-cli两个 以上两个依赖都属于开发依赖，故使用命令： npm i webpack webpack-cli -D (当然，在此之前应该npm init -y初始化下) webpack可以进行0配置 打包工具 -&gt; 输出后的结果(js模块) 举例： 创建文件夹和文件：-src -&gt; index...
webpack的安装和基础配置
Ihavealotdream的博客
11-10 940
最近在学vue，因为vuecli（vue的脚手架）是基于webpack进行搭建的，涉及到webpack的安装和基础配置，记录一下学习的内容 一、webpack 的安装 webpack是用npm进行安装的，所以先检查下自己是否已安装node；打开cmd输入node–version以及npm --version 若没有则需要在自己电脑先安装node 在检查自己电脑已安装node好时，打开cmd 输入命令：npm install webpack webpack-cli -g 进行全局安装，因为webpack
webpack4.41.2
weixin_44500533的博客
10-20 306
使用入口，出口配置打包： 入口： 简写： module.exports = { entry: './src/test.js' }; ****使用相对路径 出口： const config = { output: { filename: 'output.js', path: '/Users/hehui/webpack_01/dist' } }; module.exports = co...
webpack@4.41.2的坑
llp5210的博客
11-28 565
首先将报错的依赖uninstall,然后下载最新版。 然后会遇到上图的错误，原因是：webpack@4.41.2中Vue-loader必须是15以上的版本，而Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,所以解决方案是 在webpack.config.js中加入 const VueLoaderPlugin = requ...
指定安装webpack3.0.0版
热门推荐
luoxiping1的专栏
05-29 1万+
npm install webpack@3.0.0 -g
webpack配置和基本使用
最新发布
07-12
Webpack是一个现代化的前端构建工具，它可以帮助开发者将多个模块打包成一个或多个最终的静态资源文件。下面是Webpack的配置和基本使用方法： 1. 安装Webpack：可以通过npm或者yarn安装Webpack。在命令行中执行以下命令： ``` npm install webpack webpack-cli --save-dev ``` 2. 创建Webpack配置文件：在项目根目录下创建一个名为`webpack.config.js`的文件，该文件是Webpack的配置文件。 3. 配置入口和出口：在`webpack.config.js`中配置入口和出口。入口是指Webpack开始构建的入口文件，出口是指Webpack构建后生成的输出文件。例如： ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; ``` 4. 配置加载器（Loaders）：Webpack支持使用加载器来处理各种类型的文件，例如将ES6代码转换为ES5、将SCSS转换为CSS等。可以在`webpack.config.js`中配置加载器。例如，使用Babel加载器处理ES6代码： ```javascript // webpack.config.js module.exports = { // ... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; ``` 5. 配置插件（Plugins）：Webpack还支持使用插件来进行更高级的功能扩展。可以在`webpack.config.js`中配置插件。例如，使用HtmlWebpackPlugin插件生成HTML文件： ```javascript // webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // ... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 6. 运行Webpack：在命令行中执行以下命令来运行Webpack构建项目： ``` npx webpack ``` 以上是Webpack的基本配置和使用方法，你可以根据自己的需求进行更详细的配置和使用。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值