若水弹丸之地

一、什么是WebPack？WebPack可以看做是模块打包机：它会分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。现在Webpack还肩负起了优化项目的责任。上面的话有三个重点：打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。转换：把...

在 上一节中，我们安装了webpack，这节我们就开始一个简单的Demo。1、建立基本项目结构首先进入上一节建立的webpack_demo文件夹。进入后在webpack_demo的根目录建立两个文件夹，分别是src文件夹和dist文件夹：> mkdir src //创建src> mkd

webpack 最出色的功能之一就是，除了 JavaScript，还可以通过 loader 引入任何其他类型的文件。一、加载CSS1、安装为了从 JavaScript 模块中 import 一个 CSS 文件，我们需要在 module 配置中 安装并添加 style-loader 和 css-loader，在终端输入：> sudo npm install --save-dev st...

一、预先准备首先我们更改目录结构并设置一个多入口、多出口的Dome。(项目的搭建以及webpack.config.js的配置跟前面一样，请参考：快速上手的Demo)目录结构：（1）src/print.js：export default function printMe() { console.log('I get called from print.js');}（2）src/i...

在开发过程中使用一些工具会让工作更便捷，效率更高。这里我们在上一节的项目基础上进行；一、使用 source map当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通...

HMR模块热替换(Hot Module Replacement 或 HMR)允许在运行时更新各种模块，而无需进行完全刷新。HMR主要是通过以下几种方式，来显著加快开发速度：保留在完全重新加载页面时丢失的应用程序状态。只更新变更内容，以节省宝贵的开发时间。调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。HMR 不适用于生产环境，这意味着它应当只在开发环境使用。一、...

上一篇通过一个小Demo我们对Webpack有了初步了解，但是它在实际开发中并不使用，而是使用Webpack的配置文件的方式进行设置。一、配置文件webpack.config.jswebpack.config.js就是Webpack的配置文件，这个文件需要自己在项目根目录下手动建立（在根目录建立）。建立好后我们对其进行配置，下面就是webpack.config.js的基本结构，无内容的标准模...

本文的目录代码继承自：webpack实践之路（二）：快速上手的Demo我们写的JS代码在上线之前，都是需要进行压缩的。在Webpack中是通过插件的方式实现JS代码的压缩，这里用uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。（1）安装> sudo cnpm install uglifyjs-webpack-plugin（2）引入插件webpa...

一、准备工作在终端输入：> mkdir webpack_demo> cd webpack_demo> mkdir src> mkdir dist> npm init -y> sudo npm install webpack webpack-cli --save-dev> sudo npm install --save-dev html-...