webpack学习笔记
gosenkle
这个作者很懒,什么都没留下…
展开
-
1、webpack安装
1、前提条件:安装了node.js最新版本2、本地安装webpack安装:npm install webpack --save-dev // 最新版本npm install webpack@version --save-dev // 按版本安装3、如果安装的webpack 4+版本,则需要安装webpack-clinpm install webpack-cli ...原创 2019-05-21 22:27:25 · 170 阅读 · 0 评论 -
16、webpack代码分离--防止公用代码的重复导入
防止重复(prevent duplication)webpack 官网文档里建议使用CommonsChunkPlugin插件可以将公共的依赖模块提取到已有的入口 chunk 中,或者提取到一个新生成的 chunk。但是实际上这个插件在4.3的版本中已经移除,你使用这个插件编译后汇报错,出现“Webpack.optimize.CommonsChunkPlugin has been remo...原创 2019-06-13 09:14:24 · 1419 阅读 · 0 评论 -
15、webpack代码分离--入口起点方式
把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。有三种常用的代码分离方法:入口起点:使用entry配置手动地分离代码。 防止重复:使用CommonsChunkPlugin去重和分离 chunk,但是webpack4.3版本中已经将其移除,所以事先需要通过S...原创 2019-06-13 09:11:16 · 329 阅读 · 0 评论 -
11、webpack开发--自动编译且自动刷新工程
※接上文webpack开发--自动编译源代码工程以及内容上文虽然代码可以自动编译,但是还是需要刷新页面才能看到实际效果,本文将实现自动编译的前提下,页面也会自动刷新的效果!webpack-dev-server为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。1、安装webpack-dev-servernpm install webpac...原创 2019-05-23 09:06:30 · 372 阅读 · 0 评论 -
10、webpack开发--自动编译源代码
如果我们更改了源代码,而不像每次都要运行npm run build,该如何办呢?1、更改package.json文件,scripts追加"watch": "webpack --watch"开启webpack watch模式{ "name": "webpack-demo", "version": "1.0.0", "description": "", "private": ...原创 2019-05-23 09:01:51 · 400 阅读 · 0 评论 -
9、webpack开发--出现错误如何定位到源文件
※项目使用前文webpack清理输出的内容一节建立的项目1、修改print.js 文件export default function print() { console.error('code find a error!');}2、构建工程并运行npm run build3、运行效果如下:这里只能看到发生了错误,并且是发生在编译后的app.bundl...原创 2019-05-23 08:58:35 · 3827 阅读 · 0 评论 -
8、webpack清理输出的内容
※项目使用前文webpack管理输出建立的项目截止目前,文件构建过程中过去的指南和代码示例遗留下来,导致我们的/dist文件夹相当杂乱。webpack 会生成文件,然后将这些文件放置在/dist文件夹中,但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常,在每次构建前清理/dist文件夹,是比较推荐的做法,因此只会生成用到的文件。clean-webpack-pl...原创 2019-05-23 08:53:37 · 1147 阅读 · 0 评论 -
14、webpack生产环境构建
1)代码压缩虽然UglifyJSPlugin是代码压缩方面比较好的选择,但是还有一些其他可选择项。以下有几个同样很受欢迎的插件:BabelMinifyWebpackPlugin ClosureCompilerPlugin如果决定尝试以上这些,只要确保新插件也会按照tree shake指南中所陈述的,具有删除未引用代码(dead code)的能力足矣。2)source map...原创 2019-05-27 10:38:48 · 273 阅读 · 0 评论 -
13、webpack构建--开发生产构建配置文件分离
1)配置的逻辑分离由于开发环境和生产环境对于构建的结果差异,如生产需要热加载、source-map和localhost server;而生产环境则需要更小bundle、更轻量的source map、更优化的资源以及改善加载时间。由于遵循逻辑分离,建议不同环境使用不同的配置文件。但是共同的代码没必要在不同的配置里重复去书写,这里遵循不重复原则,编写一个通用配置,通过插件webpack-mer...原创 2019-05-27 10:35:03 · 337 阅读 · 0 评论 -
12、webpack构建--移除未引用代码(tree shaking )
tree shaking是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如import和export。这个术语和概念实际上是兴起于 ES2015 模块打包工具rollup。新的 webpack 4 正式版本,扩展了这个检测能力,通过package.json的"sideEff...原创 2019-05-27 10:31:51 · 2556 阅读 · 1 评论 -
7、webpack管理输出
※项目使用前文webpack起步建立的项目随着应用程序增长,并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle,手动地对index.html文件进行管理,一切就会变得困难起来。然而,可以通过一些插件,会使这个过程更容易操控。1、index.html自动生成,防止入口脚本名字修改还要再手动修改index.html1)安装html-webpack-pluginnp...原创 2019-05-22 10:23:35 · 251 阅读 · 0 评论 -
6、webpack管理资源--加载数据
※项目使用前文webpack起步建立的项目※JSON 支持实际上是内置的,也就是说import Data from './data.json'默认将正常运行。要导入 CSV、TSV 和 XML,你可以使用csv-loader和xml-loader。1)安装csv-loader和xml-loadernpm install csv-loaderxml-loader --s...原创 2019-05-22 09:38:37 · 315 阅读 · 0 评论 -
5、webpack管理资源--加载字体
※项目使用前文webpack起步建立的项目※ file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。1)安装file-loadernpm install file-loader --save-dev // 前文已经安装可忽略2)修改webpack.config.js,追加字体模块加载规则const path = require('...原创 2019-05-22 09:31:43 · 591 阅读 · 0 评论 -
4、webpack管理资源--加载图片文件
※项目使用上文webpack起步建立的项目1)安装file-loadernpm install file-loader --save-dev2)修改webpack.config.js,追加css模块加载规则const path = require('path');module.exports = { entry: './src/index.js', outp...原创 2019-05-22 09:28:45 · 417 阅读 · 0 评论 -
3、webpack管理资源-加载css文件
※项目使用前文webpack起步建立的项目1)安装css-loader和styple-loadernpm install css-loader style-loader --save-dev2)修改webpack.config.js,追加css模块加载规则const path = require('path');module.exports = { entry: '...原创 2019-05-22 09:26:24 · 281 阅读 · 0 评论 -
2、webpack 起步
1、创建目录初始化npm,并安装webpack和webpack-climkdir webpack-demo && cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev2、工程目录更如下webpack-demo |- webpack.config.js // webpack配置...原创 2019-05-21 22:31:48 · 215 阅读 · 0 评论 -
17、webpack代码分离--动态导入
动态导入(dynamic imports)当涉及到动态代码拆分时,webpack 提供了两个类似的技术。对于动态导入,第一种,也是优先选择的方式是,使用符合ECMAScript 提案的import()语法。第二种,则是使用 webpack 特定的require.ensure。import() 调用会在内部用到 promises。如果在旧有版本浏览器中使用 import(),记得...原创 2019-06-13 09:21:46 · 658 阅读 · 0 评论