WebPack1.x 常用功能介绍

<p><code></p> <p>注意:本文描述的配置只适用webpack1.x;由于webpack已经推出2.x并有大量更改,特此申明</p> <h3 id="articleHeader0">概述</h3> <p>Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script的。同时也能转换、捆绑、打包其他的静态资源,包括css、<a href="http://www.js-code.com/tag/image" title="image" target="_blank">image</a>、font file、template等。这里就尽量详细的来介绍下一些基本功能的使用。</p> <h3 id="articleHeader1">安装</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack -g " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> webpack -g </code></pre> <h3 id="articleHeader2">运行webpack</h3> <p>webpack需要编写一个config文件,然后根据这个文件来执行需要的打包功能。我们现在来编写一个最简单的config。新建一个文件,命名为webpack-config.js。config文件实际上就是一个Commonjs的模块。内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var path = require('path'); var buildPath = path.resolve(__dirname,&quot;build&quot;); var nodemodulesPath = path.resolve(__dirname,'node_modules'); var config = { //入口文件配置 entry:path.resolve(__dirname,'src/main.js'), resolve:{ extentions:[&quot;&quot;,&quot;js&quot;]//当requrie的模块找不到时,添加这些后缀 }, //文件导出的配置 output:{ path:buildPath, filename:&quot;app.js&quot; } } module.exports = config; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">var</span> buildPath = path.resolve(__dirname,<span class="hljs-string">"build"</span>); <span class="hljs-keyword">var</span> nodemodulesPath = path.resolve(__dirname,<span class="hljs-string">'node_modules'</span>); <span class="hljs-keyword">var</span> config = { <span class="hljs-comment">//入口文件配置</span> entry:path.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>]<span class="hljs-comment">//当requrie的模块找不到时,添加这些后缀</span> }, <span class="hljs-comment">//文件导出的配置</span> output:{ path:buildPath, filename:<span class="hljs-string">"app.js"</span> } } <span class="hljs-built_in">module</span>.exports = config; </code></pre> <p>我的目录结构是这样的:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack |---index.html |---webpack-config.js |---src |---main.js |---js |---a.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---main.js</span> |<span class="hljs-comment">---js</span> |<span class="hljs-comment">---a.js</span> </code></pre> <p>ma<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>.js文件内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> a = require('./js/a');<br /> a();<br /> console.log('hello world');<br /> <a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>cument.getElementById(&quot;conta<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>er&quot;).inner<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a> = &quot;</p> <p>hello world</p> <p>&quot;;<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">var</span> a = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./js/a'</span>); a(); <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'hello world'</span>); <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"container"</span>).innerHTML = <span class="hljs-string">"&lt;p&gt;hello world&lt;/p&gt;"</span>; </code></pre> <p>a.js文件内容如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module.exports = function(){ console.log('it is a '); } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'it is a '</span>); } </code></pre> <p>然后我们执行如下的命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack --config webpack-config.js --colors " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack <span class="hljs-comment">--config webpack-config.js --colors</span> </code></pre> <p>这样我们就能在目录里面看到一个新生成的目录build,目录结构如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack |---index.html |---webpack-config.js |---build |---app.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---build</span> |<span class="hljs-comment">---app.js</span> </code></pre> <p>然后引用app.js就Ok啦。main.js和模块a.js的内容就都打包到app.js中了。这就演示了一个最简单的把模块的js打包到一个文件的过程了。</p> <h3 id="articleHeader3">介绍webpack config文件</h3> <p>webpack是根据config里面描述的内容对一个项目进行打包的。接着我们来解释下config文件中的节点分别代表什么意思。一个config文件,基本都是由以下几个配置项组成的。</p> <h4><strong>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></strong></h4> <p>配置要打包的文件的入口;可以配置多个入口文件,下面会有介绍。</p> <h4><strong>resolve</strong></h4> <p>配置文件后缀名(extensions),除了js,还有jsx、coffee等等。<br />alias配置项,可以为常用模块配置改属性,可以节省编译的搜索时间。例如:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" resolve:{ extensions:['.js','.jsx'], alias:{ 'react':path.join(nodeModulesPath,'react/react.js') } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> <span class="hljs-selector-tag">resolve</span>:{ <span class="hljs-attribute">extensions</span>:[<span class="hljs-string">'.js'</span>,<span class="hljs-string">'.jsx'</span>], alias:{ <span class="hljs-string">'react'</span>:path.<span class="hljs-built_in">join</span>(nodeModulesPath,<span class="hljs-string">'react/react.js'</span>) } }</code></pre> <p>除了这个功能还可以配置其他有用的功能,由于我还不完全了解,有知道的朋友欢迎指教。</p> <h4><strong>output</strong></h4> <p>配置输出文件的路径,文件名等。</p> <h4><strong>module(loaders)</strong></h4> <p>配置要使用的loader。把资源文件(css、图片、html等非js模块)处理成相应的js模块,然后其它的<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s才能对这些资源进行下一步处理。比如<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-loader可以把<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>的文件转换成<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>。<br />大部分的对文件的处理的功能都是通过loader实现的。loader可以用来处理在入口文件中require的和其他方式引用进来的文件。loader一般是一个独立的<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>模块,要单独安装。</p> <p>loader配置项:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="test: /.(js|jsx)$/, //注意是正则表达式,不要加引号,匹配要处理的文件 loader: 'eslint-loader', //要使用的loader,&quot;-loader&quot;可以省略 include: [path.resolve(__dirname, &quot;src/app&quot;)], //把要处理的目录包括进来 exclude: [nodeModulesPath] //排除不处理的目录 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">test:</span> <span class="hljs-regexp">/.(js|jsx)$/</span>, <span class="hljs-comment">//注意是正则表达式,不要加引号,匹配要处理的文件</span> <span class="hljs-string">loader:</span> <span class="hljs-string">'eslint-loader'</span>, <span class="hljs-comment">//要使用的loader,"-loader"可以省略</span> <span class="hljs-string">include:</span> [path.resolve(__dirname, <span class="hljs-string">"src/app"</span>)], <span class="hljs-comment">//把要处理的目录包括进来</span> <span class="hljs-string">exclude:</span> [nodeModulesPath] <span class="hljs-comment">//排除不处理的目录</span> </code></pre> <p>目前已有的loader列表:<a href="https://webpack.github.io/docs/list-of-loaders.html" rel="nofollow noreferrer" target="_blank">https://webpack.github.io/docs/list-of-loaders.html</a> </p> <p>一个module的例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="module: { preLoaders: [ { test: /.(js|jsx)$/, loader: 'eslint-loader', include: [path.resolve(__dirname, &quot;src/app&quot;)], exclude: [nodeModulesPath] }, ], loaders: [ { test: /.(js|jsx)$/, //正则表达式匹配 .js 和 .jsx 文件 loader: 'babel-loader?optional=runtime&amp;stage=0',//对匹配的文件进行处理的loader exclude: [nodeModulesPath]//排除node module中的文件 } ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">module</span>: { preLoaders: [ { test: <span class="hljs-regexp">/.(js|jsx)$/</span>, loader: <span class="hljs-string">'eslint-loader'</span>, include: [path.resolve(__dirname, <span class="hljs-string">"src/app"</span>)], exclude: [nodeModulesPath] }, ], loaders: [ { test: <span class="hljs-regexp">/.(js|jsx)$/</span>, <span class="hljs-comment">//正则表达式匹配 .js 和 .jsx 文件</span> loader: <span class="hljs-string">'babel-loader?optional=runtime&amp;stage=0'</span>,<span class="hljs-comment">//对匹配的文件进行处理的loader </span> exclude: [nodeModulesPath]<span class="hljs-comment">//排除node module中的文件</span> } ] } </code></pre> <h4><strong><a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s</strong></h4> <p>顾名思义,就是配置要使用的插件。plugin是比loader功能更强大的插件,能使用更多的wepack api。来看一个使用plugin的例子:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="plugins: [ //压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { //supresses warnings, usually from module minification warnings: false } }), //允许错误不打断程序 new webpack.NoErrorsPlugin(), //把指定文件夹xia的文件复制到指定的目录 new TransferWebpackPlugin([ {from: 'www'} ], path.resolve(__dirname,&quot;src&quot;)) ] " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">plugins:</span> [ <span class="hljs-comment">//压缩打包的文件</span> <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-symbol"> compress:</span> { <span class="hljs-comment">//supresses warnings, usually from module minification</span> <span class="hljs-symbol"> warnings:</span> <span class="hljs-literal">false</span> } }), <span class="hljs-comment">//允许错误不打断程序</span> <span class="hljs-keyword">new</span> webpack.NoErrorsPlugin(), <span class="hljs-comment">//把指定文件夹xia的文件复制到指定的目录</span> <span class="hljs-keyword">new</span> TransferWebpackPlugin([ {<span class="hljs-string">from:</span> <span class="hljs-string">'www'</span>} ], path.resolve(__dirname,<span class="hljs-string">"src"</span>)) ] </code></pre> <p>目前已有的plugins列表:<a href="http://webpack.github.io/docs/list-of-plugins.html" rel="nofollow noreferrer" target="_blank">http://webpack.github.io/docs/list-of-plugins.html</a></p> <h3 id="articleHeader4">如何压缩输出的文件</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="plugins: [ //压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { //supresses warnings, usually from module minification warnings: false } })] " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">plugins:</span> [ <span class="hljs-comment">//压缩打包的文件</span> <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-symbol"> compress:</span> { <span class="hljs-comment">//supresses warnings, usually from module minification</span> <span class="hljs-symbol"> warnings:</span> <span class="hljs-literal">false</span> } })] </code></pre> <h3 id="articleHeader5">如何copy目录下的文件到输出目录</h3> <p>copy文件需要通过插件"transfer-webpack-plugin"来完成。</p> <p>安装:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install transfer-webpack-plugin -save " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> transfer-webpack-<span class="hljs-keyword">plugin</span> -<span class="hljs-keyword">save</span> </code></pre> <p>配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var TransferWebpackPlugin = require('transfer-webpack-plugin'); //其他节点省略 plugins: [ //把指定文件夹下的文件复制到指定的目录 new TransferWebpackPlugin([ {from: 'www'} ], path.resolve(__dirname,&quot;src&quot;)) ] " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> TransferWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'transfer-webpack-plugin'</span>); <span class="hljs-comment">//其他节点省略 </span> plugins: [ <span class="hljs-comment">//把指定文件夹下的文件复制到指定的目录</span> <span class="hljs-keyword">new</span> TransferWebpackPlugin([ {<span class="hljs-keyword">from</span>: <span class="hljs-string">'www'</span>} ], path.resolve(__dirname,<span class="hljs-string">"src"</span>)) ] </code></pre> <h3 id="articleHeader6">打包<a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script模块</h3> <p>支持的js模块化方案包括:</p> <ul> <li> <p>ES6 模块</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import MyModule from './MyModule.js';" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> MyModule <span class="hljs-keyword">from</span> <span class="hljs-string">'./MyModule.js'</span>;</code></pre> </li> <li> <p>CommonJS</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var MyModule = require('./MyModule.js');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">var</span> MyModule = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./MyModule.js'</span>);</code></pre> </li> <li> <p>AMD</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="define(['./MyModule.js'], function (MyModule) { });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code>define([<span class="hljs-string">'./MyModule.js'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(MyModule)</span> </span>{ });</code></pre> </li> </ul> <p>上面已经演示了打包js模块,这里不再重复。ES6的模块需要配置<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-loader来先把处理一下js文件。<br />下面展示下打包ES模块的配置文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var webpack = require('webpack'); var path = require('path'); var buildPath = path.resolve(__dirname, 'build'); var nodeModulesPath = path.resolve(__dirname, 'node_modules'); var TransferWebpackPlugin = require('transfer-webpack-plugin'); var config = { entry: [path.join(__dirname, 'src/main.js')], resolve: { extensions: [&quot;&quot;, &quot;.js&quot;, &quot;.jsx&quot;] //node_modules: [&quot;web_modules&quot;, &quot;node_modules&quot;] (Default Settings) }, output: { path: buildPath, filename: 'app.js' }, plugins: [ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.NoErrorsPlugin(), new TransferWebpackPlugin([ {from: 'www'} ], path.resolve(__dirname,&quot;src&quot;)) ], module: { preLoaders: [ { test: /.(js|jsx)$/, loader: 'eslint-loader', include: [path.resolve(__dirname, &quot;src/app&quot;)], exclude: [nodeModulesPath] }, ], loaders: [ { test: /.js$/, //注意是正则表达式,不要加引号 loader: 'babel-loader?optional=runtime&amp;stage=0',//babel模块相关的功能请自查,这里不做介绍 exclude: [nodeModulesPath] } ] }, //Eslint config eslint: { configFile: '.eslintrc' //Rules for eslint }, }; module.exports = config; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>); <span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">var</span> buildPath = path.resolve(__dirname, <span class="hljs-string">'build'</span>); <span class="hljs-keyword">var</span> nodeModulesPath = path.resolve(__dirname, <span class="hljs-string">'node_modules'</span>); <span class="hljs-keyword">var</span> TransferWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'transfer-webpack-plugin'</span>); <span class="hljs-keyword">var</span> config = { entry: [path.join(__dirname, <span class="hljs-string">'src/main.js'</span>)], resolve: { extensions: [<span class="hljs-string">""</span>, <span class="hljs-string">".js"</span>, <span class="hljs-string">".jsx"</span>] <span class="hljs-comment">//node_modules: ["web_modules", "node_modules"] (Default Settings)</span> }, output: { path: buildPath, filename: <span class="hljs-string">'app.js'</span> }, plugins: [ <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ compress: { warnings: <span class="hljs-literal">false</span> } }), <span class="hljs-keyword">new</span> webpack.NoErrorsPlugin(), <span class="hljs-keyword">new</span> TransferWebpackPlugin([ {<span class="hljs-keyword">from</span>: <span class="hljs-string">'www'</span>} ], path.resolve(__dirname,<span class="hljs-string">"src"</span>)) ], <span class="hljs-keyword">module</span>: { preLoaders: [ { test: <span class="hljs-regexp">/.(js|jsx)$/</span>, loader: <span class="hljs-string">'eslint-loader'</span>, include: [path.resolve(__dirname, <span class="hljs-string">"src/app"</span>)], exclude: [nodeModulesPath] }, ], loaders: [ { test: <span class="hljs-regexp">/.js$/</span>, <span class="hljs-comment">//注意是正则表达式,不要加引号</span> loader: <span class="hljs-string">'babel-loader?optional=runtime&amp;stage=0'</span>,<span class="hljs-comment">//babel模块相关的功能请自查,这里不做介绍</span> exclude: [nodeModulesPath] } ] }, <span class="hljs-comment">//Eslint config</span> eslint: { configFile: <span class="hljs-string">'.eslintrc'</span> <span class="hljs-comment">//Rules for eslint</span> }, }; <span class="hljs-built_in">module</span>.exports = config; </code></pre> <h3 id="articleHeader7">打包静态资源</h3> <h4>css/sass/less</h4> <p>安装css-loader和style-loader</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install css-loader --save -dev npm install style-loader --save -dev " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> npm <span class="hljs-keyword">install</span> css-loader <span class="hljs-comment">--save -dev</span> npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">style</span>-loader <span class="hljs-comment">--save -dev</span> </code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> config = {<br /> en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>:path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>,'src/main.js'),<br /> resolve:{<br /> extentions:[&quot;&quot;,&quot;js&quot;]<br /> },<br /> output:{<br /> path:buildPath,<br /> file<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>:&quot;app.js&quot;<br /> },<br /> module:{<br /> loaders:[{<br /> test:/.css$/,<br /> loader:'style!css',//sass配置:style!css!sass 执行顺序:左<--右 exclude:nodemodulesPath }] } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code> var config = { <span class="hljs-symbol">entry:</span>path.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), <span class="hljs-symbol">resolve:</span>{ <span class="hljs-symbol">extentions:</span>[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, <span class="hljs-symbol">output:</span>{ <span class="hljs-symbol">path:</span>buildPath, <span class="hljs-symbol">filename:</span><span class="hljs-string">"app.js"</span> }, <span class="hljs-class"><span class="hljs-keyword">module</span>:{</span> <span class="hljs-symbol">loaders:</span>[{ <span class="hljs-symbol">test:</span>/.css$/, <span class="hljs-symbol">loader:</span><span class="hljs-string">'style!css'</span>,<span class="hljs-regexp">//sass</span>配置<span class="hljs-symbol">:style!css!sass</span> 执行顺序<span class="hljs-symbol">:</span>左&lt;--右 <span class="hljs-symbol">exclude:</span>nodemodulesPath }] } } </code></pre> <p>style-loader会把css文件嵌入到html的style标签里,css-loader会把css按字符串导出,这两个基本都是组合使用的。打包完成的文件,引用执行后,会发现css的内容都插入到了head里的一个style标签里。<br />如果是sass或less配置方式与上面类似。</p> <h4><a href="http://www.js-code.com/tag/images" title="images" target="_blank">images</a></h4> <p>可以通过url-loader把较小的图片转换成base64的字符串内嵌在生成的文件里。<br />安装:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install url-loader --save -dev " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">url</span>-loader <span class="hljs-comment">--save -dev</span> </code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var config = { entry:path.resolve(__dirname,'src/main.js'), resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;app.js&quot; }, module:{ loaders:[{ test:/.css$/, loader:'style!css',// exclude:nodemodulesPath }, { test:/.png$/,loader:'url-loader?limit=10000'}//限制大小小于10k的 ] } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> config = { entry:path.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, output:{ path:buildPath, filename:<span class="hljs-string">"app.js"</span> }, <span class="hljs-keyword">module</span>:{ loaders:[{ test:<span class="hljs-regexp">/.css$/</span>, loader:<span class="hljs-string">'style!css'</span>,<span class="hljs-comment">//</span> exclude:nodemodulesPath }, { test:<span class="hljs-regexp">/.png$/</span>,loader:<span class="hljs-string">'url-loader?limit=10000'</span>}<span class="hljs-comment">//限制大小小于10k的</span> ] } } </code></pre> <p>css文件内容:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" #container{ color: #f00; background:url(images/logo-201305.png); /*生成完图片会被处理成base64的字符串 注意:不要写'/images/logo-201305.png',否则图片不被处理*/ } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> <span class="hljs-selector-id">#container</span>{ <span class="hljs-attribute">color</span>: <span class="hljs-number">#f00</span>; <span class="hljs-attribute">background</span>:<span class="hljs-built_in">url</span>(images/logo-201305.png); <span class="hljs-comment">/*生成完图片会被处理成base64的字符串 注意:不要写'/images/logo-201305.png',否则图片不被处理*/</span> } </code></pre> <h4>iconfont</h4> <p>内嵌iconfont的使用方法其实和上述处理png图片的方法一致。通过url-loader来处理。</p> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var config = { entry:path.resolve(__dirname,'src/main.js'), resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;app.js&quot; }, module:{ loaders:[{ test:/.css$/, loader:'style!css',// exclude:nodemodulesPath }, { test:/.(png|woff|svg|ttf|eot)$/,loader:'url-loader?limit=10000'}//限制大小小于10k的 ] } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">var</span> config = { entry:path.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, output:{ path:buildPath, filename:<span class="hljs-string">"app.js"</span> }, <span class="hljs-keyword">module</span>:{ loaders:[{ test:<span class="hljs-regexp">/.css$/</span>, loader:<span class="hljs-string">'style!css'</span>,<span class="hljs-comment">//</span> exclude:nodemodulesPath }, { test:<span class="hljs-regexp">/.(png|woff|svg|ttf|eot)$/</span>,loader:<span class="hljs-string">'url-loader?limit=10000'</span>}<span class="hljs-comment">//限制大小小于10k的</span> ] } } </code></pre> <p>css文件内容:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" @font-face {font-family: 'iconfont'; src: url('fonts/iconfont.eot'); /* IE9*/ src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/iconfont.woff') format('woff'), /* chrome、firefox */ url('fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code> @<span class="hljs-keyword">font-face</span> {<span class="hljs-attribute">font-family</span>: <span class="hljs-string">'iconfont'</span>; <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'fonts/iconfont.eot'</span>); <span class="hljs-comment">/* IE9*/</span> <span class="hljs-attribute">src</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'fonts/iconfont.eot?#iefix'</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">'embedded-opentype'</span>), <span class="hljs-comment">/* IE6-IE8 */</span> <span class="hljs-built_in">url</span>(<span class="hljs-string">'fonts/iconfont.woff'</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">'woff'</span>), <span class="hljs-comment">/* chrome、firefox */</span> <span class="hljs-built_in">url</span>(<span class="hljs-string">'fonts/iconfont.ttf'</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">'truetype'</span>), <span class="hljs-comment">/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/</span> <span class="hljs-built_in">url</span>(<span class="hljs-string">'fonts/iconfont.svg#iconfont'</span>) <span class="hljs-built_in">format</span>(<span class="hljs-string">'svg'</span>); <span class="hljs-comment">/* iOS 4.1- */</span> } </code></pre> <p>执行打包后会把字体文件都转换成base64字符串内容到文件里.<br />这里有个头疼的问题,就是每个浏览器支持的字体格式不一样,由于把全部格式的字体打包进去,造成不必要的资源浪费。</p> <h3 id="articleHeader8">打包template</h3> <p>我以打包handlebars的模块为例,来演示下打包模块的过程。有的模板对应的loader,有可能没有现成的,恐怕要自己实现loader。</p> <p>先安装必须的<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>模块</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install handlebars-loader --save -dev npm install handlebars -save//是必须的 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> handlebars-loader <span class="hljs-comment">--save -dev</span> npm <span class="hljs-keyword">install</span> handlebars -<span class="hljs-keyword">save</span>//是必须的 </code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var config = { entry:path.resolve(__dirname,'src/main.js'), resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;app.js&quot; }, module:{ loaders:[ { test: /.html$/, loader: &quot;handlebars-loader&quot; } ] } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code> var <span class="hljs-built_in">config</span> = { entry:<span class="hljs-built_in">path</span>.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, <span class="hljs-built_in">output</span>:{ <span class="hljs-built_in">path</span>:buildPath, filename:<span class="hljs-string">"app.js"</span> }, module:{ <span class="hljs-built_in">loaders</span>:[ { test: /.html$/, loader: <span class="hljs-string">"handlebars-loader"</span> } ] } } </code></pre> <p>新建一个模板文件tb.html,目录结构:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="webpack |---index.html |---webpack-config.js |---src |---template | |---tb.html |---main.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---template</span> | |<span class="hljs-comment">---tb.html</span> |<span class="hljs-comment">---main.js</span> </code></pre> <p>main.js中调用模块的代码如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var template = require(&quot;./template/tp.html&quot;); var data={say_hello:&quot;it is handlebars&quot;}; var html = template(data); document.getElementById('tmpl_container').innerHTML = html; " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">var</span> template = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./template/tp.html"</span>); <span class="hljs-keyword">var</span> data={say_hello:<span class="hljs-string">"it is handlebars"</span>}; <span class="hljs-keyword">var</span> html = template(data); <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'tmpl_container'</span>).innerHTML = html; </code></pre> <h3 id="articleHeader9">公用的模块分开打包</h3> <p>这需要通过插件“CommonsChunkPlugin”来实现。这个插件不需要安装,因为webpack已经把他包含进去了。<br />接着我们来看配置文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var config = { entry:{app:path.resolve(__dirname,'src/main.js'), vendor: [&quot;./src/js/common&quot;]},//【1】注意这里 resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;app.js&quot; }, module:{ loaders:[{ test:/.css$/, loader:'style!css', exclude:nodemodulesPath } ] }, plugins:[ new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), //【2】注意这里 这两个地方市用来配置common.js模块单独打包的 new webpack.optimize.CommonsChunkPlugin({ name: &quot;vendor&quot;,//和上面配置的入口对应 filename: &quot;vendor.js&quot;//导出的文件的名称 }) ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">var</span> <span class="hljs-string">config = {</span> <span class="hljs-attr">entry</span>:<span class="hljs-string">{app:path.resolve(__dirname,'src/main.js'),</span> <span class="hljs-attr">vendor</span>: <span class="hljs-string">["./src/js/common"]},//【1】注意这里</span> <span class="hljs-attr">resolve</span>:<span class="hljs-string">{</span> <span class="hljs-attr">extentions</span>:<span class="hljs-string">["","js"]</span> <span class="hljs-attr">},</span> <span class="hljs-attr">output</span>:<span class="hljs-string">{</span> <span class="hljs-attr">path</span>:<span class="hljs-string">buildPath,</span> <span class="hljs-attr">filename</span>:<span class="hljs-string">"app.js"</span> <span class="hljs-attr">},</span> <span class="hljs-attr">module</span>:<span class="hljs-string">{</span> <span class="hljs-attr">loaders</span>:<span class="hljs-string">[{</span> <span class="hljs-attr">test</span>:<span class="hljs-string">/.css$/,</span> <span class="hljs-attr">loader</span>:<span class="hljs-string">'style!css',</span> <span class="hljs-attr">exclude</span>:<span class="hljs-string">nodemodulesPath</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">},</span> <span class="hljs-attr">plugins</span>:<span class="hljs-string">[</span> <span class="hljs-attr">new</span> <span class="hljs-string">webpack.optimize.UglifyJsPlugin({</span> <span class="hljs-attr">compress</span>: <span class="hljs-string">{</span> <span class="hljs-attr">warnings</span>: <span class="hljs-string">false</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}),</span> <span class="hljs-meta">//【2】注意这里</span> <span class="hljs-string">这两个地方市用来配置common.js模块单独打包的</span> <span class="hljs-attr">new</span> <span class="hljs-string">webpack.optimize.CommonsChunkPlugin({</span> <span class="hljs-attr">name</span>: <span class="hljs-string">"vendor",//和上面配置的入口对应</span> <span class="hljs-attr">filename</span>: <span class="hljs-string">"vendor.js"//导出的文件的名称</span> <span class="hljs-attr">})</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> </code></pre> <p>目录结构现在是这样的:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack |---index.html |---webpack-config.js |---src |---main.js |---js |---a.js //a里面require了common |---common.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---main.js</span> |<span class="hljs-comment">---js</span> |<span class="hljs-comment">---a.js //a里面require了common</span> |<span class="hljs-comment">---common.js</span> </code></pre> <p>执行webpack会生成app.js和common.js两个文件.</p> <h3 id="articleHeader10">code split(模块分离,按需加载)</h3> <p>有些场景,我们可能希望模块在需要的时候再加载,而不是一股脑儿打包到一起。从而加速首屏的加载速度。举个例子,在做单页应用的时候,每个场景对应一个模块。如果场景很多,把模块打包到一起,最后的bundle文件必然很臃肿,加载很慢。那么只要在每个场景需要展示的时候,再加载对应的js模块。就可以优化这个问题了。webpack支持模块按需加载,这个功能叫code split。下面介绍怎么使用这个功能。</p> <p>目录结构:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack |---index.html |---webpack-config.js |---src |---main.js |---js |---codeSplit.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---main.js</span> |<span class="hljs-comment">---js</span> |<span class="hljs-comment">---codeSplit.js</span> </code></pre> <p>codeSplit.js:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" //就是普通的模块 没什么特殊的 console.log('code split'); module.exports = { name:'cplll' } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-comment">//就是普通的模块 没什么特殊的</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'code split'</span>); <span class="hljs-built_in">module</span>.exports = { name:<span class="hljs-string">'cplll'</span> } </code></pre> <p>main.js:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var cp = function(resolve){ require.ensure(['./js/codeSplit.js'],function(){//注意这里哦,就是用require.ensure来按需加载的,这是webpack特有的 resolve(require('./js/codeSplit.js'));//加载好 require模块 }); } var getModule = function(){ return new Promise((resolve,reject)=>{<br /> cp(resolve);<br /> });<br /> }</p> <p>getModule().then((cl)=>{<br /> console.log(cl.name);<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> cp = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve</span>)</span>{ <span class="hljs-built_in">require</span>.ensure([<span class="hljs-string">'./js/codeSplit.js'</span>],<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-comment">//注意这里哦,就是用require.ensure来按需加载的,这是webpack特有的</span> resolve(<span class="hljs-built_in">require</span>(<span class="hljs-string">'./js/codeSplit.js'</span>));<span class="hljs-comment">//加载好 require模块</span> }); } <span class="hljs-keyword">var</span> getModule = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>{ cp(resolve); }); } getModule().then(<span class="hljs-function">(<span class="hljs-params">cl</span>)=&gt;</span>{ <span class="hljs-built_in">console</span>.log(cl.name); }); </code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//...省略 var buildPath = path.resolve(__dirname,&quot;build&quot;); var config = { entry:{ m1:path.resolve(__dirname,'src/main.js') },//注意在这里添加文件的入口 resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;app.js&quot;, publicPath:'build/' //注意这里哦,分离出来的模块会按这个路径来加载 } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-comment">//...省略</span> <span class="hljs-keyword">var</span> buildPath = path.resolve(__dirname,<span class="hljs-string">"build"</span>); <span class="hljs-keyword">var</span> config = { entry:{ m1:path.resolve(__dirname,<span class="hljs-symbol">'src</span>/main.js') },<span class="hljs-comment">//注意在这里添加文件的入口</span> resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, output:{ path:buildPath, filename:<span class="hljs-string">"app.js"</span>, publicPath:<span class="hljs-symbol">'build</span>/' <span class="hljs-comment">//注意这里哦,分离出来的模块会按这个路径来加载</span> } } </code></pre> <p>执行命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="webpack --config webpack-config.js --colors " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>webpack <span class="hljs-comment">--config webpack-config.js --colors</span> </code></pre> <p>生成结果:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="webpack |---index.html |---webpack-config.js |---build //生成结果 | |---app.js | |---1.app.js |---src |---main.js |---js |---codeSplit.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js</span> |<span class="hljs-comment">---build //生成结果</span> | |<span class="hljs-comment">---app.js</span> | |<span class="hljs-comment">---1.app.js</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---main.js</span> |<span class="hljs-comment">---js</span> |<span class="hljs-comment">---codeSplit.js</span> </code></pre> <p>页面里引用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot; src=&quot;./build/app.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./build/app.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>打开页面就是发现,app.js和1.app.js(在cp函数调用的时候加载)分开加载了。<br /><span class="img-wrap"><img data-src="/img/bVICKg?w=805&amp;h=94" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>最后需要特别注意,配置output里的<a href="http://www.js-code.com/tag/public" title="public" target="_blank">public</a>Path。这里容易有坑。因为不配置加载路径是这样的:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="http://localhost:9527/1.app.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:9527/1.app.js</span> </code></pre> <p>配置以后(<a href="http://www.js-code.com/tag/public" title="public" target="_blank">public</a>Path:'build/'):</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="http://localhost:9527/build/1.app.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:9527/build/1.app.js</span> </code></pre> <h3 id="articleHeader11">多个入口</h3> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var config = { entry:{ m1:path.resolve(__dirname,'src/main.js'), m2:path.resolve(__dirname,'src/main1.js') },//注意在这里添加文件的入口 resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, output:{ path:buildPath, filename:&quot;[name].js&quot;//注意这里使用了name变量 } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>var <span class="hljs-built_in">config</span> = { entry:{ m1:<span class="hljs-built_in">path</span>.resolve(__dirname,<span class="hljs-string">'src/main.js'</span>), m2:<span class="hljs-built_in">path</span>.resolve(__dirname,<span class="hljs-string">'src/main1.js'</span>) },//注意在这里添加文件的入口 resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, <span class="hljs-built_in">output</span>:{ <span class="hljs-built_in">path</span>:buildPath, filename:<span class="hljs-string">"[name].js"</span>//注意这里使用了name变量 } } </code></pre> <h3 id="articleHeader12">webpack-dev-server</h3> <p>在开发的过程中个,我们肯定不希望,每次修改完都手动执行webpack命令来调试程序。所以我们可以用webpack-dev-server这个模块来取代烦人的执行命令。它会监听文件,在文件修改后,自动编译、刷新浏览器的页面。另外,编译的结果是保存在内存中的,而不是实体的文件,所以是看不到的,因为这样会编译的更快。它就想到与一个轻量的express服务器。<br />安装:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install webpack-dev-server --save -dev " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> npm <span class="hljs-keyword">install</span> webpack-dev-<span class="hljs-keyword">server</span> <span class="hljs-comment">--save -dev</span> </code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var config = { entry:path.resolve(__dirname,'src/main.js'), resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, //Server Configuration options devServer:{ contentBase: '', //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录 devtool: 'eval', hot: true, //自动刷新 inline: true, port: 3005 }, devtool: 'eval', output:{ path:buildPath, filename:&quot;app.js&quot; }, plugins: [ new webpack.HotModuleReplacementPlugin(),//开启热替换插件 new webpack.NoErrorsPlugin() ] } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code> <span class="hljs-attr">var</span> <span class="hljs-string">config = {</span> <span class="hljs-attr">entry</span>:<span class="hljs-string">path.resolve(__dirname,'src/main.js'),</span> <span class="hljs-attr">resolve</span>:<span class="hljs-string">{</span> <span class="hljs-attr">extentions</span>:<span class="hljs-string">["","js"]</span> <span class="hljs-attr">},</span> <span class="hljs-meta">//Server</span> <span class="hljs-string">Configuration options</span> <span class="hljs-attr">devServer</span>:<span class="hljs-string">{</span> <span class="hljs-attr">contentBase</span>: <span class="hljs-string">'', //静态资源的目录 相对路径,相对于当前路径 默认为当前config所在的目录</span> <span class="hljs-attr">devtool</span>: <span class="hljs-string">'eval',</span> <span class="hljs-attr">hot</span>: <span class="hljs-string">true, //自动刷新</span> <span class="hljs-attr">inline</span>: <span class="hljs-string">true, </span> <span class="hljs-attr">port</span>: <span class="hljs-string">3005 </span> <span class="hljs-attr">},</span> <span class="hljs-attr">devtool</span>: <span class="hljs-string">'eval',</span> <span class="hljs-attr">output</span>:<span class="hljs-string">{</span> <span class="hljs-attr">path</span>:<span class="hljs-string">buildPath,</span> <span class="hljs-attr">filename</span>:<span class="hljs-string">"app.js"</span> <span class="hljs-attr">},</span> <span class="hljs-attr">plugins</span>: <span class="hljs-string">[</span> <span class="hljs-attr">new</span> <span class="hljs-string">webpack.HotModuleReplacementPlugin(),//开启热替换插件</span> <span class="hljs-attr">new</span> <span class="hljs-string">webpack.NoErrorsPlugin()</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> </code></pre> <p>我的目录结构:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack |---index.html |---webpack-config.js//我把静态资源目录配置在了这里 |---src |---main.js |---js |---a.js |---common.js " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> webpack |<span class="hljs-comment">---index.html</span> |<span class="hljs-comment">---webpack-config.js//我把静态资源目录配置在了这里</span> |<span class="hljs-comment">---src</span> |<span class="hljs-comment">---main.js</span> |<span class="hljs-comment">---js</span> |<span class="hljs-comment">---a.js</span> |<span class="hljs-comment">---common.js</span> </code></pre> <p>执行命令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" webpack-dev-server --config webpack-dev-config.js --inline --colors " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs objectivec"><code> webpack-dev-server --config webpack-dev-config.js --<span class="hljs-keyword">inline</span> --colors </code></pre> <p>默认访问地址:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="http://localhost:3000/index.html(根据配置会不一样) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-string">http:</span><span class="hljs-comment">//localhost:3000/index.html(根据配置会不一样)</span> </code></pre> <p>有一点需要声明,在index.html(引用导出结果的html文件)里直接引用“app.js”,不要加父级目录,因为此时app.js在内存里与output配置的目录无关:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script type=&quot;text/javascript&quot; src=&quot;app.js&quot;></script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"app.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>详细文档在这里查看:<a href="http://webpack.github.io/docs/webpack-dev-server.html" rel="nofollow noreferrer" target="_blank">http://webpack.github.io/docs/webpack-dev-server.html</a></p> <h3 id="articleHeader13">Hot Module Replacement</h3> <p>热替换是指在应用运行时候替换、添加、移除某个模块而不需要全部模块重新编译、整个页面重新加载。在web应用变的越来越复杂的今天,webpack的编译速度会越来越慢。使用热替换能大大提高webpack的编译速度,提升开发效率。下面介绍如何基于webpack-dev-server配置热替换。</p> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" var config = { entry:[ 'webpack/hot/dev-server',//注意点1:热替换配置点1 path.resolve(__dirname,'src/main1.js') ], // entry:{m1:path.resolve(__dirname,'src/main.js'), // m2:path.resolve(__dirname,'src/main1.js')}, resolve:{ extentions:[&quot;&quot;,&quot;js&quot;] }, // target: 'node', //Server Configuration options devServer:{ contentBase: '', //Relative directory for base of server devtool: 'eval', hot: true, //注意点2:热替换配置点2 inline: true, port: 3005 //Port Number }, devtool: 'eval', output:{ path:buildPath, filename:&quot;app.js&quot; }, plugins: [ //Enables Hot Modules Replacement new webpack.HotModuleReplacementPlugin(),//注意点3:热替换配置点3 //Allows error warnings but does not stop compiling. Will remove when eslint is added new webpack.NoErrorsPlugin() ], } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">var</span> config = { entry:[ <span class="hljs-string">'webpack/hot/dev-server'</span>,<span class="hljs-comment">//注意点1:热替换配置点1</span> path.resolve(__dirname,<span class="hljs-string">'src/main1.js'</span>) ], <span class="hljs-comment">// entry:{m1:path.resolve(__dirname,'src/main.js'),</span> <span class="hljs-comment">// m2:path.resolve(__dirname,'src/main1.js')},</span> resolve:{ extentions:[<span class="hljs-string">""</span>,<span class="hljs-string">"js"</span>] }, <span class="hljs-comment">// target: 'node',</span> <span class="hljs-comment">//Server Configuration options</span> devServer:{ contentBase: <span class="hljs-string">''</span>, <span class="hljs-comment">//Relative directory for base of server</span> devtool: <span class="hljs-string">'eval'</span>, hot: <span class="hljs-literal">true</span>, <span class="hljs-comment">//注意点2:热替换配置点2</span> inline: <span class="hljs-literal">true</span>, port: <span class="hljs-number">3005</span> <span class="hljs-comment">//Port Number</span> }, devtool: <span class="hljs-string">'eval'</span>, output:{ path:buildPath, filename:<span class="hljs-string">"app.js"</span> }, plugins: [ <span class="hljs-comment">//Enables Hot Modules Replacement</span> <span class="hljs-keyword">new</span> webpack.HotModuleReplacementPlugin(),<span class="hljs-comment">//注意点3:热替换配置点3</span> <span class="hljs-comment">//Allows error warnings but does not stop compiling. Will remove when eslint is added</span> <span class="hljs-keyword">new</span> webpack.NoErrorsPlugin() ], } </code></pre> <p>配置文件里添加3个配置点</p> <ol> <li> <p>entry 节点里添加 'webpack/hot/dev-server'</p> </li> <li> <p>devServer节点里添加 hot: <a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a></p> </li> <li> <p>plugins 节点里 <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> webpack.HotModuleReplacementPlugin()</p> </li> </ol> <p>这样配置文件就配置好了。接下来在代码文件里添加热替换要监听的模块。代码如下:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var h1 = require('./hot1'); if(module.hot){//判断是否开启了热替换 module.hot.accept('./hot1',function(){//在hot1模块更新时,执行替换 h1 = require('./hot1'); }); } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-keyword">var</span> h1 = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./hot1'</span>); <span class="hljs-keyword">if</span>(<span class="hljs-built_in">module</span>.hot){<span class="hljs-comment">//判断是否开启了热替换</span> <span class="hljs-built_in">module</span>.hot.accept(<span class="hljs-string">'./hot1'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-comment">//在hot1模块更新时,执行替换</span> h1 = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./hot1'</span>); }); } </code></pre> <p>更多信息参考:<a href="https://segmentfault.com/a/1190000007374078">webpack-dev-server和热替换介绍</a></p> <h3 id="articleHeader14">如何区分开发及生产环境</h3> <p>在webpack.config.js使用process.env.NODE_ENV进行判断<br />在<a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json里面的script设置环境变量,注意mac与<a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>s的设置方式不一样</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;scripts&quot;: { &quot;publish-mac&quot;: &quot;export NODE_ENV=prod&amp;&amp;webpack -p --progress --colors&quot;, &quot;publish-win&quot;: &quot;set NODE_ENV=prod&amp;&amp;webpack -p --progress --colors&quot;, &quot;dev-mac&quot;: &quot;export NODE_ENV=dev&amp;&amp;webpack-dev-server&quot;, &quot;dev-win&quot;: &quot;set NODE_ENV=dev&amp;&amp;webpack-dev-server }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs perl"><code><span class="hljs-string">"scripts"</span>: { <span class="hljs-string">"publish-mac"</span>: <span class="hljs-string">"export NODE_ENV=prod&amp;&amp;webpack -p --progress --colors"</span>, <span class="hljs-string">"publish-win"</span>: <span class="hljs-string">"set NODE_ENV=prod&amp;&amp;webpack -p --progress --colors"</span>, <span class="hljs-string">"dev-mac"</span>: <span class="hljs-string">"export NODE_ENV=dev&amp;&amp;webpack-dev-server"</span>, <span class="hljs-string">"dev-win"</span>: <span class="hljs-string">"set NODE_ENV=dev&amp;&amp;webpack-dev-server }</span></code></pre> <p>config配置:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" //其他代码省略... var NODE_ENV = process.env.NODE_ENV; var config = { //入口文件配置 entry: path.resolve(__dirname, 'src/main.js'), resolve: { extentions: [&quot;&quot;, &quot;js&quot;]//当requrie的模块找不到时,添加这些后缀 }, devtool: 'eval', //文件导出的配置 output: { path: buildPath, filename: &quot;app.js&quot; }, module: { loaders: [ { test: /.html$/, loader: 'tmodjs',//对匹配的文件进行处理的loader exclude: [nodemodulesPath]//排除node module中的文件 } ] } } if(NODE_ENV === &quot;prod&quot;){//判断是生产环境执行生产配置 delete config.devtool; config.plugins = [ //压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { //supresses warnings, usually from module minification warnings: false } })]; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-comment">//其他代码省略...</span> <span class="hljs-keyword">var</span> NODE_ENV = process.env.NODE_ENV; <span class="hljs-keyword">var</span> config = { <span class="hljs-comment">//入口文件配置</span> entry: path.resolve(__dirname, <span class="hljs-string">'src/main.js'</span>), resolve: { extentions: [<span class="hljs-string">""</span>, <span class="hljs-string">"js"</span>]<span class="hljs-comment">//当requrie的模块找不到时,添加这些后缀</span> }, devtool: <span class="hljs-string">'eval'</span>, <span class="hljs-comment">//文件导出的配置</span> output: { path: buildPath, filename: <span class="hljs-string">"app.js"</span> }, <span class="hljs-keyword">module</span>: { loaders: [ { test: <span class="hljs-regexp">/.html$/</span>, loader: <span class="hljs-string">'tmodjs'</span>,<span class="hljs-comment">//对匹配的文件进行处理的loader </span> exclude: [nodemodulesPath]<span class="hljs-comment">//排除node module中的文件</span> } ] } } <span class="hljs-keyword">if</span>(NODE_ENV === <span class="hljs-string">"prod"</span>){<span class="hljs-comment">//判断是生产环境执行生产配置</span> <span class="hljs-keyword">delete</span> config.devtool; config.plugins = [ <span class="hljs-comment">//压缩打包的文件</span> <span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ compress: { <span class="hljs-comment">//supresses warnings, usually from module minification</span> warnings: <span class="hljs-literal">false</span> } })]; } </code></pre> <p>之后dev环境执行命令:npm run dev-win<br />生产环境执行命令:npm run publish-win</p> <h3 id="articleHeader15">常用plugins</h3> <ul> <li> <p>代码热替换, HotModuleReplacementPlugin</p> </li> <li> <p>将css成生文件,而非内联,ExtractTextPlugin</p> </li> <li> <p>报错但不退出webpack进程,NoErrorsPlugin</p> </li> <li> <p>多个 html共用一个js文件(chunk),可用CommonsChunkPlugin</p> </li> <li> <p>清理文件夹,Clean</p> </li> <li> <p>调用模块的别名ProvidePlugin,例如想在js中用$,如果通过webpack加载,需要将$与<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>对应起来</p> </li> </ul> <h3 id="articleHeader16">参考文章</h3> <p>* <a href="https://github.com/lcxfs1991/blog/issues/2" rel="nofollow noreferrer" target="_blank">webpack使用优化</a></p> <p></code></p>
脚本宝典为你提供优质服务
脚本宝典 » WebPack1.x 常用功能介绍

发表评论

提供最优质的资源集合

立即查看 了解详情