Webpack学习之哥们入个门呗（一）

来源：互联网发布：java常考面试题编辑：程序博客网时间：2024/04/30 13:24

Webpack是一个在你的应用中建立模块化的JavaScript工具，我们需要从CLI(Command Line Interface)命令行接口和API中去学会使用它，它可以简化我们的工作流程，并且以正确的顺序快速构建应用程序的依赖图和捆绑它们。Webpack可以通过配置来定制优化你的代码,去合理的分离我们的css/js代码,无需再次刷新页面就可以在开发服务器运行一个程序的代码以及其他许多这样的冷却特性。

接下来会一步步的告诉你，使用Webpack的好处，和你的首选

1.创建一个包

我们先可以为我们的Webpack创建一个演示的目录

mkdir webpack-demo && cd webpack-demonpm init -ynpm install --save-dev webpack

./node_modules/.bin/webpack --help # 其他.\node_modules\.bin\webpack --help # 针对windows系统webpack --help #如果你是全局安装

现在创建一个子目录app然后创建一个index.js文件

function component () {  var element = document.createElement('div');  /* _是属于lodash中的东西，稍后会提 */  element.innerHTML = _.join(['Hello','webpack'], ' ');  return element;}document.body.appendChild(component());

我们创建一个index.html文件去运行它

<html>  <head>    <title>webpack 2 demo</title>    <script src="https://unpkg.com/lodash@4.16.6"></script>  </head>  <body>    <script src="app/index.js"></script>  </body></html>

这个例子中，我们通过script标签构造了一个隐藏的依赖关系

index.js取决于lodash已经被包括进来了，因为index.js用到了lodash提供的_，一个全局变量。

用这种模式来管理JavaScript项目是有一些问题的：

如果依赖失踪,或包含错误的想想发生,接下来的应用程序就不会执行。
如果包括但不依赖,还有很多不必要的代码下载到了客户端。

当然前面的lodash如果你没有安装的话是不能够使用的(可以全局安装)

npm -g install lodashnpm install --save lodash

然后import导入他们

+ import _ from 'lodash';function component () {  ...

如今我们会在此改变index.html，其中将只会引入一个bundle.js文件

 <html>   <head>     <title>webpack 2 demo</title>-    <!--<script src="https://unpkg.com/lodash@4.16.6"></script>-->   </head>   <body>-    <!--<script src="app/index.js"></script>-->+    <script src="dist/bundle.js"></script>   </body> </html>

之前的index.js明确要求lodash存在，并且提供_。

通过声明一个模块需要的依赖关系,Webpack可以使用这些信息来建立一个依赖图。然后使用这个依赖图以正确的顺序生成一个脚本的优化包用来执行。还未使用的依赖关系将不会包含在包中。

现在运行Webpack用index.js作为输入文件，用bundle.js作为输出文件。

./node_modules/.bin/webpack app/index.js dist/bundle.jsHash: ff6c1d39b26f89b3b7bbVersion: webpack 2.2.0Time: 385ms    Asset    Size  Chunks                    Chunk Namesbundle.js  544 kB       0  [emitted]  [big]  main   [0] ./~/lodash/lodash.js 540 kB {0} [built]   [1] (webpack)/buildin/global.js 509 bytes {0} [built]   [2] (webpack)/buildin/module.js 517 bytes {0} [built]   [3] ./app/index.js 278 bytes {0} [built]

在你的浏览器中打开index.html，你会成功的在页面中看到“Hello webpack”。

2.在`Webpack`中使用`ES2015`

注意到前面的文件了使用ES2015模块导入（app/index.js）吗? 虽然import/export语句在浏览器不支持,然而使用它们是很好，因为Webpack很好的用ES5封装了他们，起到了模拟的效果。

值得注意的是，Webpack根本不会去修改你除了import/export之外的代码，你依旧可以使用其他的东西，当然，如果是import/export，Webpack会分分钟钟帮你换掉。

3.为`Webpack`配置`config`

对于更复杂的配置,我们可以使用一个配置文件，Webpack会参考你的配置文件去打包你的代码。在您创建一个webpack.config.js文件后,你可以设置CLI命令在配置设置中。

webpack.config.js

var path = require('path');module.exports = {  entry: './app/index.js',  output: {    filename: 'bundle.js',    path: path.resolve(__dirname, 'dist')  }};

这个文件是可以直接运行的

./node_modules/.bin/webpack --config webpack.config.jsHash: ff6c1d39b26f89b3b7bbVersion: webpack 2.2.0Time: 390ms    Asset    Size  Chunks                    Chunk Namesbundle.js  544 kB       0  [emitted]  [big]  main   [0] ./~/lodash/lodash.js 540 kB {0} [built]   [1] (webpack)/buildin/global.js 509 bytes {0} [built]   [2] (webpack)/buildin/module.js 517 bytes {0} [built]   [3] ./app/index.js 278 bytes {0} [built]

如果webpack.config.js存在，直接执行webpack指令，它会默认执行这个文件。

如果你之前用“创建一个包”的知识点成功的创建了dist/bundle.js文件，那么请删除之前的dist文件，以此来验证webpack.config.js文件是否执行成功。

这个配置文件可以有效的提高我们Webpack的灵活性，我们可以增加规则加载程序，插件选项，等等很多有趣的事。

4.用`npm`去运行`Webpack`

我们建立一个package.json然后在package.json中保存CLI运行webpack的指令，当然这不是特别的好。

{  ...  "scripts": {    "build": "webpack"  },  ...}

然后使用npm run build去运行package.json中的CLI指令。
你可以通过自己设置一些webpack参数来运行Webpack。

下一篇将讲Webpack的安装

1 0

Webpack学习之哥们入个门呗（一）

1.创建一个包

2.在Webpack中使用ES2015

3.为Webpack配置config

4.用npm去运行Webpack

2.在`Webpack`中使用`ES2015`

3.为`Webpack`配置`config`

4.用`npm`去运行`Webpack`