webpack入门必知必会

wtmdbf 5年前
   <h2>前言</h2>    <p>这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出。</p>    <p>首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了。我个人认为webpack是一个集前端自动化、模块化、组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出。</p>    <p>本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分、打包、压缩。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cec52ae58afb065b0fbd0d13e30fb41d.jpg"></p>    <h2>步骤</h2>    <h3>1.传统项目中的问题</h3>    <p>在不依赖任何自动化、模块化工具的项目中,通常我们的代码是这样的:</p>    <p>index.html</p>    <pre>  <code class="language-javascript"><html>    <head>      <title>传统项目</title>      <script src="https://code.jquery.com/jquery-2.2.4.js"></script>    </head>    <body>      <script src="app/index.js"></script>    </body>  </html></code></pre>    <p>app/index.js</p>    <pre>  <code class="language-javascript">function main() {      $('body').html('hello world!');  }    main();</code></pre>    <p>以上示例中,脚本之间存在着隐式依赖关系。</p>    <p>index.js取决于被包括在页面运行之前的jQuery,它只是假设有一个全局变量$的存在。</p>    <p>这样管理JavaScript项目有一些问题:</p>    <p>如果依赖项丢失,或者包含在错误的顺序中,应用程序将不会运行。</p>    <p>如果包含依赖项但没有使用,那么浏览器必须下载很多不必要的代码。</p>    <p>所以为了解决以上问题,我们需要使用webpack来实现一些改变。</p>    <h3>2.准备</h3>    <p>首先我们得在项目中安装webpack,我们打开命令行工具运行:</p>    <pre>  <code class="language-javascript">mkdir demo && cd demo // 新建demo文件夹并打开  npm init // 初始化npm,生成package.json配置文件  npm install --save-dev webpack@beta // 安装webpack2.0版本,mac系统可能需要添加sudo命令</code></pre>    <p>以上使用的npm命令需要安装node.js,可以点击这里安装即可: node.js</p>    <p>为了改进上方传统项目中的不足,我们这里还需要安装jQuery:</p>    <pre>  <code class="language-javascript">npm install --save jQuery // 安装jQuery</code></pre>    <h3>3.改变</h3>    <p>改变后的index.js</p>    <pre>  <code class="language-javascript">var $ = require('jquery');    function main() {      $('body').html('hello world!');  }    main();</code></pre>    <p>这里我们可以直接在index.js里引用jQuery,index.js明确要求jQuery的存在,这样就不存在隐式依赖的问题(没有全局污染)。</p>    <p>改变后的index.html</p>    <pre>  <code class="language-javascript"><html>    <head>      <title>webpack项目</title>    </head>    <body>        <script src="dist/bundle.js"></script>    </body>  </html></code></pre>    <p>这里我们的index.html文件只引入了最终打包后的bundle.js。现在运行webpack命令将index.js输出为bundle.js。</p>    <p>运行命令:webpack app/index.js dist/bundle.js</p>    <pre>  <code class="language-javascript">webpack app/index.js dist/bundle.js  Hash: 3bb91a6dedfc2a2a1c08  Version: webpack 2.2.0-rc.4  Time: 397ms      Asset    Size  Chunks                    Chunk Names  bundle.js  270 kB       0  [emitted]  [big]  main     [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]     [1] ./app/index.js 83 bytes {0} [built]</code></pre>    <p>最终我们在浏览器中打开index.html页面可以看到输出的“hello world!”。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/05e99e682d19fbdf50bf90de672b7c16.jpg"></p>    <h3>4.拆分</h3>    <p>现在如果我们index.js中的”hello world!”字符串需要放到另外一个hello.js中,然后在index.js中引入使用的话,这就涉及到webpack模块拆分的功能。</p>    <p>app/index.js</p>    <pre>  <code class="language-javascript">var $ = require('jquery');  var str = require('./hello.js');    function main() {      $('body').html(str);  }    main();</code></pre>    <p>app/hello.js</p>    <pre>  <code class="language-javascript">var str = 'hello world!';    module.exports = str;</code></pre>    <p>我们在hello.js中通过module.exports导出str变量,然后在index.js通过require导入同样可以实现浏览器中输入“hello world!”的效果,当然我们需要重新运行下webpack命令:webpack app/index.js dist/bundle.js</p>    <h3>5.打包</h3>    <p>其实在上面我们已经使用了打包命令:</p>    <pre>  <code class="language-javascript">webpack app/index.js dist/bundle.js</code></pre>    <p>其中的app/index.js即为打包的入口文件,而dist/bundle.js为输出文件。</p>    <p>但是我们会发现这样的命令不利于我们复杂项目配置的使用,对于更复杂的配置,我们可以利用配置文件webpack.config.js来统一管理。</p>    <p>我们可以在demo文件夹下新建webpack.config.js配置文件:</p>    <pre>  <code class="language-javascript">module.exports = {    entry: './app/index.js',    output: {      filename: 'bundle.js',      path: './dist'    }  }</code></pre>    <p>上方配置中的entry就是我们的入口文件,可以有多个入口文件,而output即为webpack打包的输入对象,filename为输出文件名,path为输出路径。</p>    <p>如此我们运行命令行:</p>    <pre>  <code class="language-javascript">webpack --config webpack.config.js</code></pre>    <p>同样可以生成打包目录dist及打包文件bundle.js。</p>    <p>当然你也可以直接运行简化的命令:</p>    <pre>  <code class="language-javascript">webpack</code></pre>    <p>webapck会自动去寻找当前目录下的webpack.config.js文件。</p>    <h3>6.压缩</h3>    <p>上一步我们利用webpack命令将多个多件打包到了一个bundle.js的文件中,但是并未进行压缩,你可以打开bundle.js进行查看。</p>    <p>而如果我们需要对打包后的代码进一步压缩处理,我们可以运行命令:</p>    <pre>  <code class="language-javascript">webpack -p</code></pre>    <p>这时我们可以来进行下打包和压缩的文件大小对比</p>    <p>打包命令:webpack</p>    <pre>  <code class="language-javascript">webpack  Hash: ab4a1091f0880100eab0  Version: webpack 2.2.0-rc.4  Time: 387ms      Asset    Size  Chunks                    Chunk Names  bundle.js  270 kB       0  [emitted]  [big]  main     [0] ./app/hello.js 50 bytes {0} [built]     [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]     [2] ./app/index.js 114 bytes {0} [built]</code></pre>    <p>输出的bundle.js整个文件大小为270 kB。</p>    <p>压缩命令:webpack -p</p>    <pre>  <code class="language-javascript">webpack -p  Hash: ab4a1091f0880100eab0  Version: webpack 2.2.0-rc.4  Time: 1967ms      Asset     Size  Chunks             Chunk Names  bundle.js  88.3 kB       0  [emitted]  main     [0] ./app/hello.js 50 bytes {0} [built]     [1] ./~/jquery/dist/jquery.js 267 kB {0} [built]     [2] ./app/index.js 114 bytes {0} [built]</code></pre>    <p>输出的bundle.js整个文件大小为88.3 kB。</p>    <p>很明显,文件被压缩了。</p>    <h3>7.进一步压缩优化</h3>    <p>上方我们通过webpack的压缩命令将文件打包并压缩了,但是对于webpack -p压缩后的文件来说其实还有压缩的余地。如果你使用的是webpack1.0,那么你可以在配置文件中添加plugins配置项,并且加入如下插件:</p>    <pre>  <code class="language-javascript">var webpack = require('webpack');    module.exports = {      ...      plugins:[          // 去除代码块内的告警语句          new webpack.optimize.UglifyJsPlugin({            compress: {              warnings: false            }          }),          // 优先考虑使用最多的模块,并为它们分配最小的ID          new webpack.optimize.OccurenceOrderPlugin()      ]      ...  }</code></pre>    <p>而本示例中使用的是webpack2.0版本,在2.0中UglifyJsPlugin的compress选项默认为false,并且OccurrenceOrderPlugin默认启用,所以无需进行配置。</p>    <h2>结语</h2>    <p>本文主要介绍了webpack入门的一些简单命令和基本配置信息,从代码拆分、打包、压缩的角度和传统的前端项目进行对比,希望以此加深大家对webpack基础知识的印象。</p>    <p>​</p>    <p> </p>    <p>来自:http://www.cnblogs.com/luozhihao/p/6287820.html</p>    <p> </p>