webpack
YaoDeBiAn
这个作者很懒,什么都没留下…
展开
-
基于webpack4.0手动搭建web项目(更新中)
由于篇幅限制,目前已转移至专栏更新:https://blog.csdn.net/YaoDeBiAn/column/info/30815知乎文章地址:https://zhuanlan.zhihu.com/p/42424686闲暇之余做的总结,仍在更新中,有错误或不足的地方请大家指正与分享见解,谢谢。一.准备工作1.初始化项目目录:npm init -y2.建立以下的目录结构:...原创 2018-08-20 09:09:07 · 2312 阅读 · 2 评论 -
Webpack4.0基础教程一:准备工作
准备工作1.初始化项目目录:npm init -y2.建立以下的目录结构:--dist--src----index.js--package.json(初始化后生成)3.完成基本的webpack配置:首先,安装基本的webpack包:npm install --save-dev webpack webpack-cli注:webpack4对webpack内核与c...原创 2018-12-04 19:07:56 · 1000 阅读 · 0 评论 -
Webpack4.0基础教程二:ES6的babel转码配置
1.安装babel-preset-env包:npm install –save-dev babel-preset-env2.在根目录下创建.babelrc文件:{ "presets": [ "env" ], "plugins": []}3.为了检验我们的配置是否成功,我们再安装babel-cli包:npm install --save-dev babel-cli,然后我们...原创 2018-12-04 19:16:13 · 665 阅读 · 0 评论 -
Webpack4.0基础教程三:安装简单的loader解析
webpack中,有一种操作就是在“.js”文件中引入非javascript资源,所以在将其打包的过程中,我们需要某些loader解析器对相关的资源进行解析。 首先我们先来看看引入css资源:安装style-loader和css-loader两个loader:npm install --save-dev style-loader css-loader webpack.confi...原创 2018-12-04 19:27:19 · 602 阅读 · 0 评论 -
Webpack4.0基础教程四:plugins(插件)
loader被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。 想要使用一个插件,你只需要require()它,然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用n...原创 2018-12-04 19:32:20 · 879 阅读 · 0 评论 -
Webpack4.0基础教程五:suorce map
当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告,JavaScript 提供了...原创 2018-12-04 19:40:36 · 443 阅读 · 0 评论 -
Webpack4.0基础教程六:开发工具(自动编译代码)
每次要编译代码时,手动运行npm run build特别麻烦。webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:1.webpack's Watch Mode(观察模式)2.webpack-dev-server(提供一个服务器)3.webpack-dev-middleware(是一个容器(wrapper),它可以把 webpack 处理后的文件传递给一个服务器...原创 2018-12-04 19:45:13 · 719 阅读 · 0 评论 -
Webpack4.0基础教程八:生产环境构建
1. 配置:上面是官方的原话~~~下面我们将会分别创建开发环境与生产环境的webpack配置文件,并将两个配置文件中公共用到的部分抽离出来,存放到一个公用配置文件中,最后通过webpack-merge这个工具我们将公共配置合并到开发与生产配置中。 首先下载webpack-merge:npm install --save-dev webpack-merge 文件目录中...原创 2018-12-04 20:06:49 · 399 阅读 · 0 评论