GXing007的博客

插件(Plugins)是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，Loders是在打包构建过程中用来处理源文件的(JSX,Scss,Less),一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用。Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成...

一切皆模块Webpack有一个不可说的优点，它把所有的文件都当做模块处理，JavaScript代码，CSS和fonts以及图片等等通过合适的loders都可以被处理。CSSwebpack提供两个工具样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(……)的方法实现require()的功能。style-...

Babel其实可以完全在webpack.config.js中进行配置，但是考虑到babel具有非常多的配置选项，在单一的webpack.config.js文件中进行配置往往使得这个文件显得太复杂，因此一些开发者支持把babel的配置选项放在一个单独的名为‘.babelrc’的配置文件中。我们现在的babel的配置并不复杂，不过之后我们会加一些东西，因此我们现在就提取出相关部分，分两个配置文件进行配...

loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的loaders可以把React中的JSX文件转换为JS文件。Loaders需要单独安装并且需要在webp...

想不想让浏览器监听你代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖npm install --save-dev webpack-dev-server devserver作为webpack配置选项中的一项，...

生成Source Maps(使调试更容易)开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置，Source Maps就是来帮我们解决这个问题的。通过简单的配置，webpack就可以在打包时为我们生成source-maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易测试。...

更快捷的执行打包任务！在命令行中输入命令类似node_modules\.bin\webpack这样的路径其实是比较烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令。在package.json中对scripts对象进行相关设置即可，设置方法如下：{ "name": "webpack-sample-p...

上一节已经成功使用Webpack打包了一个文件了。在终端进行复杂的命令行操作，其实是不太方便且容易出错的，接下来看看Webpack的另一种更常见的使用方法。通过配置文件来使用WebpackWebpack拥有很多其它的比较高级的功能(比如loaders和plugins)，这些功能都可以通过命令行模式实现，但是这样不太方便且容易出错，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的...

1.使用Webpack前需要做的准备在新项目文件夹中新创建package.json,这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务。(在终端可以使用npm init可以自动创建package.json)文件。输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，不过不用担心，如果你不准备在npm中发布你的模块，这些问题的答案都不重...

文章目录安装过程使用`$ webpack entry.js bundle.js` 遇到错误打包运行安装过程1.首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。2.用 npm 安装 Webpack：这里我们使用的是将webpack安装到项目依赖中，这样就可以使用项目本地版本的 ...