- 综合排序
- 最热优先
- 最新优先
- 来自专栏生如夏花绚烂
webpack系列---webpack-dev-server
上一篇文章我们介绍了webpack的基本使用，但我们每次打包都要运行下webpack很是麻烦，有没有一种办法使得自动监控，自动打包，我们只需ctrl+s就行了？ 通过webpack-dev-server可实现我们的需求，他会自动帮我们监控代码并完成打包 如何使用？ cnpm i webpack-dev-server -D 2.在package.json配置命令 这样我们在命令框输入 npm run dev 即可执行webpack-dev-server 运行发现报错，Cannot find module 'webpack' 这是因为webpack-dev-server依赖webpack并且强制我们项目本地安装webpack，虽然我们之前全局安装过webpack 但是项目依赖并没有所有我们执行cnpm i webpack -D 安装完成再次运行 提示我们安装webpack-cli cnpm i webpack-cli -D 安装完成再次运行 可以看到项目运行在
99510编辑于 2022-09-08 - 来自专栏全栈程序员必看
webpack（6）webpack处理图片
图片处理url-loader(webpack5之前的处理方式) 在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片 body{ /img/test1.png"); } 但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 base64 URI 的 loader。 接着我们在webpack.config.js中配置url-loader的设置 module.exports = { module: { rules: [ { test 图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。 webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。
1.2K10编辑于 2022-09-19 - 来自专栏Renda
前端技术 Webpack（学习 Webpack 的原因，Webpack 快速入门）
现代化前端开发工作，离不开 Webpack 相关技术栈，是提升前端生产力的利器 Webpack 在前端项目中实践模块化思想 Webpack 本质上是一个模块化打包工具，它通过“万物皆模块”这种设计思想， ： npm init --yes npm i webpack webpack-cli --save-dev webpack 是 Webpack 的核心模块，webpack-cli 是 Webpack 的 这里我们使用的 Webpack 版本是 v4.42.1，有了 Webpack 后，就可以直接运行 webpack 命令来打包 JS 模块代码，具体操作如下： $ npx webpack 这个命令在执行的过程中 更多 Webpack 相关的配置可以在 Webpack 的官网中找到：https://webpack.js.org/configuration/#options 让配置文件支持智能提示 因为 Webpack /webpack.config.js // 一定记得运行 Webpack 前先注释掉这里。
2.1K40发布于 2020-09-08 - 来自专栏Golang开发
webpack
6 将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容 基本使用 webpack的两种使用方式：1命令行 2 配置文件 webpack.config.js package 创建webpacktest npm i -D webpack webpack-cli 当前webpacktest目录下文件结构 tree -L 1 . ├── node_modules ├── package-lock.json /node_modules/.bin/webpack helloworld.js Hash: 4f3b3b08a01b5cace0ff Version: webpack 4.34.0 Time: 322ms /src/main.js --mode development" }, 在终端中执行执行命令 npm run build webpack打包处理的过程： 1 运行webpack的打包命令 2 webpack 找到我们指定的入口文件main.js 3 webpack 分析main.js 中的代码，当遇到imort $....语法的时候，那么webpack就会导入模块代码 配置文件webpack.config.js
1.7K31发布于 2019-06-16 - 来自专栏软件工程
Webpack
关于webpack和node和npm的关系 四.关于Webpack的一个简单应用 五.webpack.config.js配置和package.json配置 六.webpack中使用css文件的配置 webpack . " 这样我们执行npm run build 就会执行webpack了 六.webpack中使用css文件的配置 在说使用css文件之前我们要说一些webpack的能力问题以及loader概念 webpack loader是webpack中一个非常核心的概念,他负责对webpack打包功能做拓展。 npm install webpack,这样就在项目内安装了一个本地webpack,但是如果我们还用的cmd终端的话肯定还是用的全局webpack,如果想用局部的应该使用node_modules/.bin
1.4K30编辑于 2021-12-23 - 来自专栏快乐阿超
webpack
首先是官方文档：https://webpack.docschina.org/ 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容 接下来我们跟着快速上手一下，将一个普通的html文件使用webpack改造 https://webpack.docschina.org/guides/getting-started 创建目录，安装依赖 mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev 新建index.html --config webpack.config.js 我们在package.json中新建一个脚本 { "name": "simple-webpack", "version": "1.0.0"
86310编辑于 2022-09-23 - 来自专栏clz
webpack
早期的前端工程化解决方案： grunt gulp 目前主流的前端工程化解决方案：[webpack](webpack 中文文档 | webpack 中文网 (webpackjs.com)) 2. webpack 解决问题 在项目中安装 webpack 安装 webpack 相关的两个包 npm install webpack webpack-cli -D（-D 是–save-dev 的缩写） 配置 webpack 插件 3.1 webpack-dev-server 每当修改了源代码，webpack 会自动进行项目的打包和构建 安装 webpack-dev-server，npm install webpack-dev-server 是**webpack 中的 HTML 插件，通过此插件可以复制 html 文件放到其他位置（内存中） 安装 html-webpack-plugin 插件， npm install html-webpack-plugin @5.3.2 -D 配置 html-webpack-plugin，(在 webpack.config.js 中) //1.
2.2K30编辑于 2023-01-02 - 来自专栏进击的君君的前端之路
webpack
var path = require('path') // 安装完webpack自带的 --dirname代表webpack.config.js文件当前所在的路径 webpack只支持原生js模块的打包 Toast 模块文件名b.js // 加载a.js模块 var Toast = require('a.js').Toast; // 这么写 ，require('a.js')是对象，加载它的Toast方法 webpack -w // 观察模式，对js代码改动会自动重新打包 webpack -p // 压缩打包js代码
74620发布于 2018-06-28 - 来自专栏前端小哥哥
webpack
我们常说的Module是什么 webpack支持 ESModule, CommonJS, AMD, Assests 如何表达各种依赖关系？ 我们常说的chunk和bundle的区别是什么？ Chunk 是Webpack打包过程中Modules的集合，是打包过程中的概念。 Webpack的打包是从⼀个⼊⼝模块开始，⼊⼝模块引⽤其他模块，模块再引⽤模块。 Webpack通过引⽤关系逐个打包模块，这些module就形成了⼀个Chunk。 当然如果有多个⼊⼝模块，可能会产出多条打包路径，每条路径都会形成⼀个Chunk。 Loader 模块转换器，将非js模块转化为webpack能识别的 Plugin 扩展插件,webpack各个阶段都会广播出对应的事件 Compiler 对象，也可以理解为webpack的实例 Compliation 模块资源 简单描述一下打包过程 初始化参数：shell webpack.config.js 开始编译 确定入口 编译模块 完成模块编译 输出资源
51210编辑于 2023-05-04 - 来自专栏Technology Share
玩转webpack（二）：webpack的核心对象
所以，在研究了一段时间的 webpack 源码之后，自己希望写个系列文章，结合自己的实践一起来谈谈 webpack 插件这个主题，也希望能够帮助其他人更全面地了解 webpack。 如果你想从整体角度了解 webpack，可以先阅读系列文章的第一篇： 玩转webpack（一）：webpack的基本架构和构建流程 P.S. 以下的分析都基于 webpack 3.6.0 P.S. }) } }]}// https://github.com/webpack/webpack/blob/master/lib/webpack.jsif(options.plugins options属性 当 webpack 开始运行时，第一件事就是解析我们传入的配置，然后将配置赋值给 Compiler 实例： // https://github.com/webpack/webpack ，保证了 webpack 强大的配置能力。
3.2K92发布于 2018-01-29 - 来自专栏河湾欢儿的专栏
webpack
http://webpackdoc.com/usage.html npm install webpack -g npm init -y npm install webpack --save-dev 新建入口文件entry.js 打包入口文件webpack entry.js xxx.js 举例说明：导出/入其他的模块 module.exports、require、 webpack默认只会处理 /css.css'); webpack的配置文件是webpack.config.js module.exports={ entry:'. css-loader'} ] } }; 生成开发用的服务器，在文件变化的时候自动打包，刷新页面 npm install webpack-dev-server -g npm install webpack-dev-server --save-dev //把依赖写入package.json webpack-dev-server --inline --hot自动刷新页面
80010发布于 2018-09-06 - 来自专栏前端卡卡西
webpack
常用loader 安装webpack cnpm install webpack -D 安装webpack-cli cnpm install webpack-cli -D 安装css-loader
49520编辑于 2022-02-25 - 来自专栏忽如寄的前端周刊
Webpack系列——Webpack + xxx配合使用
Webpack + Babel 在webpack中使用Babel通过使用babel-loader即可，babel中的配置可以通过options选项进行配置。 use:[ 'eslint-loader', 'babel-loader' ] }] } }; module.exports = config; Webpack + Sass 在Webpack中对Sass进行编译需要使用sass-loader，而sass-loader依赖于node-sass和webpack，因此需要安装 npm i node-sass sass-loader webpack -D 由于sass没有提供重写url的功能，因此所有的链接资源都是相对于输出文件（output）来说的，因此在实际开发中通常会加入resolve-url-loader来实现资源url的正常使用 sourceMap' ] }] } }; module.exports = config; Webpack + Less 类似于Sass的使用，Less的编译只需要安装less-loader
92520发布于 2019-07-24 - 来自专栏全栈程序员必看
plugins webpack_webpack plugin原理
plugin 插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！ 插件目的在于解决 loader 无法实现的其他事。 常用的插件 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例，接下来我们介绍几个常用的插件 BannerPlugin 将横幅添加到每个生成的块的顶部 一般用于添加版权声明 const webpack = require('webpack'); // 访问内置的插件 const path = require('path'); module.exports 使用插件前我们需要安装插件，命令如下： npm install --save-dev html-webpack-plugin 安装完成以后，我们需要在webpack中引用它，并对其进行配置 const { VueLoaderPlugin } = require('vue-loader') const path = require('path') const webpack = require('webpack
69330编辑于 2022-09-21 - 来自专栏生如夏花绚烂
webpack系列---webpack介绍&基本使用
最基本的使用方式 1.全局安装 npm i webpack -g 全局使用webpack命令 2.安装到项目依赖 有时候我们的项目要依赖webpack，可以运行npm i webpack --save-dev 编译才能正常运行在浏览器上 5.新建webpack.config.js 这是webpack的配置文件，在里面设置打包入口，出口等信息 //webpack.config.js const path = require "cross-env NODE=production webpack-dev-server --config webpack.config.js" }, ... 在webpack配置文件 const idDev = process.env.NODE_ENV==='development' let webpack = require('webpack') plugins const { CleanWebpackPlugin } = require ('clean-webpack-plugin') let webpack = require('webpack'); module.exports
81910编辑于 2022-09-08 - 来自专栏全栈程序员必看
plugins webpack_webpack实现原理
plugin 插件是 webpack 的支柱功能。webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！ 插件目的在于解决 loader 无法实现的其他事。 常用的插件 由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入一个 new 实例，接下来我们介绍几个常用的插件 BannerPlugin 将横幅添加到每个生成的块的顶部 一般用于添加版权声明 const webpack = require('webpack'); // 访问内置的插件 const path = require('path'); module.exports 使用插件前我们需要安装插件，命令如下： npm install --save-dev html-webpack-plugin 安装完成以后，我们需要在webpack中引用它，并对其进行配置 const { VueLoaderPlugin } = require('vue-loader') const path = require('path') const webpack = require('webpack
69620编辑于 2022-09-19 - 来自专栏全栈程序员必看
webpack版本选择_webpack官网
1.先确认node和npm有没有安装 node -v npm -v 2.创建一个打包文件夹 mkdir test 3.全局安装webpack和webpack-cli 使用npm安装会卡在一个地方，因此这里我使用 cnpm，没有安装的话，可以百度看看怎么安装 cnpm install webpack@3.39.21 -g cnpm install webpack-cli@3.3.7 -g cnpm install webpack-dev-server@3.8.0 -g 4.在test文件夹下面安装 对应版本如下： cnpm install webpack@3.39.21 --save-dev(执行完此命令test 目录下会生成node_modules文件夹和package.json文件) cnpm install webpack-cli@3.3.7 --save-dev cnpm install webpack-dev-server @3.8.0 --save-dev cnpm install html-webpack-pluginr@3.2.0 --save-dev 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn
1.2K50编辑于 2022-09-22 - 来自专栏分布式系统和大数据处理
Webpack入门
Webpack入门 2016-5-10 作者: 张子阳 分类: Web前端 简介 Webpack是一个前端构建工具，本文将简要介绍它最常用的功能，并创建一个基于webpack的前端开发环境。 接着安装webpack，打开命令行工具，执行： npm install webpack --save-dev 如果是全局安装webpack，那么在本文后面安装完extract-text-webpack-plugin 运行webpack 现在就可以运行webpack了，只不过，现在的Webpack并没有任何的其他的能力，例如将scss转为css。 重新执行webpack： D:\webpack-tutorial>webpack --display-modules --display-chunks Hash: 881d51e5a0d94bc015bc 使用 Webpack Loader处理多种资源 Webpack Loader有点类似于一个管道，用来增强Webpack的能力。
2.1K20发布于 2018-09-30 - 来自专栏程序员IT圈
Webpack 详解
Output：告诉webpack如何命名输出的文件以及输出的目录 Loaders：由于webpack只能处理javascript，所以我们需要对一些非js文件处理成webpack能够处理的模块，比如sass 在webpack4 中 CommonsChunkPlugin被废弃，使用 SplitChunksPlugin webpack详解 读到这里，或许你对webpack有一个大概的了解，那webpack 是怎么运行的呢 的生命周期中会适时的执行： this.apply*("emit",options) 当然上面提到的Tapable都是1.0版本之前的，如果想深入学习，可以查看Tapable和事件流(https://segmentfault.com 流程篇 本文关于webpack 的流程讲解是基于webpack4的。 webpack 入口文件 从webpack项目的package.json文件中我们找到了入口执行函数，在函数中引入webpack，那么入口将会是 lib/webpack.js,而如果在shell中执行，
82330发布于 2018-07-27 - 来自专栏前端小菜鸡yym
webpack postcss
npm i postcss-loader -D webpack.config.js 因为是对样式文件的处理，因此需要加到css文件loader中。并且，对css的兼容是在处理css文件前就执行的。
55620编辑于 2023-01-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号