![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
JesonAx
这个作者很懒,什么都没留下…
展开
-
webpack 学习笔记
webpack 学习笔记一、概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖图,此依赖图会映射项目所需的所有模块,并生成一个或多个 bundle 。入口(entry)入口(entry)指示 webpack 应该使用哪个模块来作为构建内部依赖图的开始。进入入口后,webpack 会找出有哪些模...原创 2019-05-31 17:48:07 · 1251 阅读 · 0 评论 -
webpack 性能优化
一、优化构建速度webpack在启动后会根据entry配置的入口出发,递归得解析所依赖的文件。这个过程分为搜索文件和把匹配的文件进行分析、转换的两个过程,因此可以从这两个角度来进行优化配置。1.1 缩小文件的搜索范围搜索过程优化方式包括:resolve字段告诉webpack怎么去搜索文件,所以首先要重视resolve字段的配置:设置resolve.modules: [path.r...转载 2019-06-06 11:03:24 · 622 阅读 · 0 评论 -
webpack 常用loaders
css-loader:加载 css,支持模块化、压缩、文件导入等特效。style-loader:把 css 代码注入到 JavaScript 中,通过 DOM 操作去加载 css。sass-loader:把 sass/scss 代码转换成 css。less-loader:把 less 代码转换成 css。stylus-loader:把 stylus 代码转换成 css。raw-load...原创 2019-06-27 14:39:52 · 257 阅读 · 0 评论 -
webpack 常用plugins
web-webpack-plugin:方便的为单页应用输出 HTML,比 html-webpack-plugin 好用。provide-plugin:从环境中提供的全局变量中加载模块,而不用导入对应的文件。hot-module-replacement-plugin:开启模块热替换功能。difine-plugin:定义环境变量。commons-chunk-plugin:提取公共代码。ex...原创 2019-06-27 14:59:38 · 288 阅读 · 0 评论 -
webpack 中配置 devtool 的作用
webpack官网的解释如下 :当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告...原创 2019-07-16 16:05:24 · 704 阅读 · 0 评论