webpack入门使用教程
开篇一张图,内容全靠编。一张图直接明了的说明了webpack的作用,bundle your sytles/assets/scripts/images。
webpack中文官网:https://www.webpackjs.com/ 官方网站永远都是我们最好的学习途径
1 安装webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
详见安装指南:https://www.webpackjs.com/guides/getting-started/
2、配置webpack.config.js
新建一个配置文件 :webpack.config.js 。输入一下代码:
const path = require('path')module.exports = {entry:'./src/index.js',output:{path:path.resolve(__dirname,'release'),filename:'bundle.js'}
}
3 配置packpage.js
在packpage.js->scripts 中添加一行来运行webpack命令。运行: npm run dev 就可以在relesae中生成bundle.js文件了。
"dev":"webpack --config ./webpack.config.js --mode development"
4 安装HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
在我们构建之前,你应该了解,虽然在
dist/
文件夹我们已经有index.html
这个文件,然而HtmlWebpackPlugin
还是会默认生成index.html
文件。这就是说,它会用新生成的index.html
文件,把我们的原来的替换。如果你在代码编辑器中将index.html
打开,你就会看到HtmlWebpackPlugin
创建了一个全新的文件,所有的 bundle 会自动添加到 html 中。
看了上面这段文字你就明白了这个插件的意义了吧。为了更好的演示该插件我们需要再写一个js文件,并在index.js中引入它。
//print.js
export default function printMe() {console.log('I get called from print.js!');
}//index.js
import printMe from './print.js'
printMe()
所以我们需要再次去修改我们的webpach.config.js文件。这次入口有两个文件index.js 和 print.js。app和print 算是别名吧。所以output也需要修改。[name].bundle.js,这就会根据别名生成两个独立的bundle文件了。关于plugins有很多配置项,这里只配置了一个title,可以直接配置一个html模板。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry:{app:'./src/index.js',print:'./src/print.js'},output:{path:path.resolve(__dirname,'dist'),filename:'[name].bundle.js'},plugins:[new HtmlWebpackPlugin({title: 'Output Management'//template:'./index.html' //使用模板就必须提前 建好模板文件})],
}
运行 npm run dev 会在dist目录下面生成三个文件,其中index.html里面也自动引入了生成的两个js文件。不需要我们在去手动配置了。
我们在index.js中已经引入了print.js,在打包生成的index.bundle.js中就会包含 print.js中的代码。所以在entry中没有必要再写一个print: './src/print.js'了。entry对象中的js会自动插入index.html的body中,这样会重复添加了,这应该是官方文档的一个小失误吧。如果两个js文件没有关联,则可以在entry中加入。
代码重复编译的问题在大型项目中是个不可忽视的问题,因此官方提供了一种解决方法叫代码分离。
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。
有三种常用的代码分离方法:
- 入口起点:使用
entry
配置手动地分离代码。 - 防止重复:使用
CommonsChunkPlugin
去重和分离 chunk。 - 动态导入:通过模块的内联函数调用来分离代码。
你可能已经注意到,由于过去的指南和代码示例遗留下来,导致我们的 /dist
文件夹相当杂乱。webpack 会生成文件,然后将这些文件放置在 /dist
文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的。
通常,在每次构建前清理 /dist
文件夹,是比较推荐的做法,因此只会生成用到的文件。让我们完成这个需求。
clean-webpack-plugin
是一个比较普及的管理插件,让我们安装和配置下。
npm install clean-webpack-plugin --save-dev
修改webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = {entry:{app:'./src/index.js',print:'./src/print.js'},output:{path:path.resolve(__dirname,'dist'),filename:'[name].bundle.js'},plugins:[new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({//title: 'Output Management',template:'./index.html'})],
}
现在执行 npm run dev
,再检查 /dist
文件夹。如果一切顺利,你现在应该不会再看到旧的文件,只有构建后生成的文件!
5 使用 source map
当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js
, b.js
和 c.js
)打包到一个 bundle(bundle.js
)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js
。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。
为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js
,source map 就会明确的告诉你。
source map 有很多不同的选项可用,请务必仔细阅读它们,以便可以根据需要进行配置。
对于本指南,我们使用 inline-source-map
选项,这有助于解释说明我们的目的(仅解释说明,不要用于生产环境):
添加一行代码就可以使用该功能了。devtool: 'inline-source-map',下面是出错后的提示信息,我在后面添加了中文的句号,所以报错。
6 安装webpack-dev-server
每次要编译代码时,手动运行 npm run dev
就会变得很麻烦。
webpack 中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware
多数场景中,你可能需要使用 webpack-dev-server
。
webpack-dev-server
为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。让我们设置以下:
npm install --save-dev webpack-dev-server
修改配置文件,告诉开发服务器(dev server),在哪里查找文件:
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')module.exports = {entry:{app:'./src/index.js',print:'./src/print.js'},
+ devtool: 'inline-source-map',
+ devServer:{
+ contentBase:'./dist',
+ open:true,
+ port:9000
+ },output:{path:path.resolve(__dirname,'dist'),filename:'[name].bundle.js'},plugins:[new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({//title: 'Output Management',template:'./index.html'})],
}
以上配置告知 webpack-dev-server
,在 localhost:9000
下建立服务,将 dist
目录下的文件,作为可访问文件。
让我们添加一个 script 脚本,可以直接运行开发服务器(dev server)。
package.json部分代码。代码中--config ./webpack.config.js --mode development 不是必须的,因为系统会自动去寻找congif配置文件,mode也有默认的模式。
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "babel src -d release","dev": "webpack --config ./webpack.config.js --mode development",
+ "start":"webpack-dev-server --config ./webpack.config.js --mode development"},
现在,我们可以在命令行中运行 npm run start
,就会看到浏览器自动加载页面。如果现在修改和保存任意源文件,web 服务器就会自动重新加载编译后的代码。
上面我们使用了CleanWebpackPlugin插件,所以运行命令后dist文件夹就会删除了,而且不会再再生成了。因为重新编译文件只在内存中。要想得到它们,我们需要关闭服务,再去执行上面的npn run dev 命令。
运行npm start 也可以,关闭服务器的快捷键是 Ctrl+c ,好像很多命令行取消服务都是这个组合键。
总结:
webpack的基本使用对比较简单。我这里只安装了四个依赖包已经一个配置文件webpack.config.js,主要用在开发环境。
- "html-webpack-plugin": "^3.2.0",
- "webpack": "^4.17.1",
- "webpack-cli": "^3.1.0",
- "webpack-dev-server": "^3.1.7"
问题:
webpack和babel如何结合在一起使用,详见下篇笔记:webpack中babel配置教程。
webpack入门使用教程相关推荐
- 新手入门,webpack入门详细教程
第一步,要使用webpack,首先要安装node.js,https://nodejs.org/en/ 官网直接下载即可,具体安装教程,可以参考菜鸟教程 https://www.runoob.com/n ...
- Webpack 入门教程
Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本章节基于 Webpack3.0 测试通过. 从图中我们可以看出,W ...
- webpack入门--前端必备
什么是 webpack? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.我们可以直接使用 r ...
- (三)webpack入门——webpack功能集合的demo
ErduYang 自律的人生才自由 博客园 首页 新随笔 联系 订阅 管理 随笔 - 37文章 - 0评论 - 8 (三)webpack入门--webpack功能集合的demo 此篇文章来源于http ...
- 扫掠两条引导线_NX10 入门图文教程——异形台架(扫掠或者沿引导线扫掠)
NX10 入门图文教程--异形台架(扫掠或者沿引导线扫掠) 块,长方体,由于这个体不是对称的,所以选择长方体完成,原点开始,设置参数 长方体,选择棱边端点,这个地方用长方体目的是上方的这个块与下面的块 ...
- MAYA 2022基础入门学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,48.0 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.41 GB |时长:4.5小时 包含 ...
- 3dmax Vray建筑可视化入门学习教程
面向初学者的3Ds Max Vray最佳Archviz可视化课程 从安装到最终图像的一切都将从头开始教授,不需要任何经验 大小解压后:3.25G 时长4h 6m 1280X720 MP4 语言:英语+ ...
- Blender 3.0基础入门学习教程 Introduction to Blender 3.0
成为Blender通才,通过这个基于项目的循序渐进课程学习所有主题的基础知识. 你会学到什么 教程获取:Blender 3.0基础入门学习教程 Introduction to Blender 3.0- ...
- Maya游戏角色绑定入门学习教程 Game Character Rigging for Beginners in Maya
准备好开始为游戏制作自己的角色动画了吗? 你会学到什么 了解Maya的界面 优化并准备好你的模型,为游戏做准备 了解关节以及如何使用它们来构建健壮的角色骨骼,以便在任何游戏引擎中制作动画 了解IK和F ...
- 三维地形制作软件 World Machine 基础入门学习教程
<World Machine课程>涵盖了你需要的一切,让你有一个坚实的基础来构建自己的高质量的电影或视频游戏地形. 你会学到什么 为渲染或游戏开发创建高分辨率.高细节的地形. 基于Worl ...
最新文章
- 自然语言处理算法工程师历史最全资料汇总-基础知识点、面试经验
- python100行代码-100行Python代码自动抢火车票!
- python的clock函数,Python3 time clock()方法
- 【星球知识卡片】深度学习图像降噪有哪些关键技术点,如何学习
- 可以编辑的标签控件CStatic
- Python format功能
- c++面向对象高级编程 学习十六 vptr和vtbl
- 天津西站,座才几个?
- 抓取mooc中国随笔
- Flutter使用阿里矢量图库管理项目svg图片
- 【yishen】黑苹果 声卡驱动
- 微信小程序富文本解析点击图片放大_小程序富文本提取图片可放大缩小
- mysql驱动加载失败怎么办_为什么mysql加载驱动会报错呢输出的结果是加载驱动失败...
- 网站服务器iis7.5配置,IIS 7.5 配置伪静态
- 直接利用Android手机破解微信加密数据库EnMicroMsg.db
- 雷军:编程不仅仅是技能,更是一种艺术!
- 获取企业微信授权code
- 函的红头文件格式制作_浙江省水利厅红头文件函模板范例
- 手把手从底层搭建react应用(如何自己实现react脚手架)(webpack环境搭建)
- 求2的1000次方的各位数字之和