| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
colinshen
8年前发布

webpack 从入门到上树

   <h2>webpack 是什么</h2>    <p><img src="https://simg.open-open.com/show/47f33d3ec28f9800b3af7fab96329d79.png"></p>    <p>一项技术、一个工具的出现,肯定是为了解决问题的。那么,webpack 是为什么解决什么问题?答案是: <strong>文件依赖管理</strong> 。我们在浏览器中的 js 中,不能直接引用其它 js, css 等文件(或说,模块)。而 webpack 就是用来解决这个问题的,让你的项目可以很好地分文件、分模块,而且它对外部文件的引入同时支持 cmd, amd 和 commondJs 这三种形式,够有诚意。</p>    <p>或许你要说了,解决文件依赖,早在 require.js 和 sea.js 的时候,都已经解决了呀!那么,webpack 在这方面,有哪些新的突破:</p>    <ol>     <li> <p>支持依赖各种拓展名的文件</p> </li>     <li> <p>能够在不依赖 gulp 或 grunt 的情况下直接产出打包文件</p> </li>     <li> <p>支持实时编译,浏览器同步刷新</p> </li>    </ol>    <p>这个时候,是不是很想唱一下王力宏的《唯一》:确定你就是我的唯一!</p>    <p>OK,进入正题。</p>    <h2>安装与运行</h2>    <p>目前,我们的项目目录结构是这样的:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs">webpack_demo  |<span class="hljs-comment">--src</span>  |  |<span class="hljs-comment">--pages</span>  |  |  |<span class="hljs-comment">--index</span>  |  |  |  |<span class="hljs-comment">--index.js</span>  |<span class="hljs-comment">--views_dev</span>  |  |<span class="hljs-comment">--index.html</span>  |<span class="hljs-comment">--webpack.config.js</span>  |<span class="hljs-comment">--package.json</span></code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <h3>安装</h3>    <p>在项目的根目录执行:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs">$ npm init <span class="hljs-comment">// 生成项目依赖文件配置 package.json</span>  $ npm install webpack -g <span class="hljs-comment">// 全局安装webpack</span>  $ touch webpack.config.js <span class="hljs-comment">// 在项目根目录下,新建 webpack.config.js 文件</span></code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <h3>配置</h3>    <p>然后,在以下3个文件,输入内容:</p>    <ol>     <li> <p>页面 HTML 文件</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs">// views_dev/index.html  <span class="hljs-doctype"><!DOCTYPE html></span>  <span class="hljs-tag"><<span class="hljs-title">html</span>></span>  <span class="hljs-tag"><<span class="hljs-title">head</span>></span>      <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>></span>      <span class="hljs-tag"><<span class="hljs-title">title</span>></span>首页<span class="hljs-tag"></<span class="hljs-title">title</span>></span>  <span class="hljs-tag"></<span class="hljs-title">head</span>></span>  <span class="hljs-tag"><<span class="hljs-title">body</span>></span>      <span class="hljs-tag"><<span class="hljs-title">div</span>></span>哈喽,world<span class="hljs-tag"></<span class="hljs-title">div</span>></span>      <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"../asset/dev/main.js"</span>></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span>  <span class="hljs-tag"></<span class="hljs-title">body</span>></span>  <span class="hljs-tag"></<span class="hljs-title">html</span>></span></code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>     <li> <p>页面引用的 js 文件</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs">// src/pages/<span class="hljs-keyword">index</span>/<span class="hljs-keyword">index</span>.js  console.<span class="hljs-keyword">log</span>(<span class="hljs-string">'I am in index/index.js, haha4'</span>);</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>     <li> <p>webpack 打包配置</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-comment">// webpack.config.js</span>  module.exports = {  <span class="hljs-comment">// 入口:要进行处理的实例(js)</span>  entry: <span class="hljs-string">'./src/pages/index/index.js'</span>,  <span class="hljs-comment">// 出口:输出配置</span>  output: {      <span class="hljs-comment">// 输出到哪个目录</span>      path: <span class="hljs-string">'./asset/dev/'</span>,      <span class="hljs-comment">// 静态资源的引用路径</span>      publicpath: <span class="hljs-string">'/asset/dev/'</span>,      <span class="hljs-comment">// 实例最终输出的名字</span>      filename: <span class="hljs-string">'[name].js'</span>  }  };</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>    </ol>    <h3>运行</h3>    <p>运行 webpack 命令,进行打包。</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-variable">$ </span>webpack</code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>然后,搞定了,此时在浏览器中打开 views_dev/index.html ,你会发现,打包成功了!</p>    <p><img src="https://simg.open-open.com/show/f3528c010c0e3d4d563331a8d97a613b.png"></p>    <p>好的,你入门了的,哈哈!接下去,我会详细介绍单个页面打包、多个页面打包,以及最后的发布上线。Now, go ~</p>    <h2>单个页面打包</h2>    <p>这里,你将学到:</p>    <ol>     <li> <p>引入其它 js 文件。是的,你将学会 <strong>模块化</strong> 。</p> </li>     <li> <p>引入其它类型的文件,以 css 为例。</p> </li>     <li> <p>实时编译 + 浏览器同步刷新。爽!</p> </li>    </ol>    <p>现在,我们的项目目录,是这样:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs">webpack_demo  |<span class="hljs-comment">--src</span>  |  |<span class="hljs-comment">--pages</span>  |  |  |<span class="hljs-comment">--index</span>  |  |  |  |<span class="hljs-comment">--index.js</span>  |  |  |  |<span class="hljs-comment">--test.js</span>  |  |  |  |<span class="hljs-comment">--index.css</span>  |  |<span class="hljs-comment">--plugins</span>  |  |  |<span class="hljs-comment">--dialog</span>  |  |  |  |<span class="hljs-comment">--dialog.css</span>  |  |  |  |<span class="hljs-comment">--dialog.js</span>  |<span class="hljs-comment">--views_dev</span>  |  |<span class="hljs-comment">--index.html</span>  |<span class="hljs-comment">--webpack.config.js</span>  |<span class="hljs-comment">--package.json</span></code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <h3>引入其它 js 文件</h3>    <ol>     <li> <p>使用相对路径</p> <p>现在,我们要在 src/pages/index.js 里面引入 src/pages/test.js 文件。这样做就可以了:</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-keyword">var</span> Test = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./test.js'</span>);</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> <p>你也许会问,此时, var Test 这个变量,得到的是什么?换个说法,怎么控制 test.js 被导出到外部的内容。答案是:通过 module.exports . 例如:</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-regexp">//</span> index/test.js  <span class="hljs-reserved">var</span> str = <span class="hljs-string">"I am in test.js"</span>;  <span class="hljs-built_in">module</span>.<span class="hljs-built_in">exports</span> = str;</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> <p>那么, require('./test.js') 的值就是 "I am in test.js" 这个字符串。 module.exports 可以导出任何值。比如,我们要导出 Object.</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs">module.exports = {    aa: <span class="hljs-string">'axxx'</span>,    b: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> {</span>}  };</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>     <li> <p>使用绝对路径(别名的使用)</p> <p>如果只能使用相对路径,那 webpack 就太不靠谱了。因为将有可能出现这样 ../../../../libs/libs-tost/toast.js , 啊,想死!那么,怎么使用呢?假如,我们想引入 src/plugins/dialog/dialog.js 这个弹窗。</p>      <ul>       <li> <p>在 webpack.config.js 中,配置别名</p>        <div contenteditable="false" tabindex="-1">         <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-comment">// webpack.config.js</span>  module.exports = {      resolve: {          <span class="hljs-comment">// 定义别名</span>          alias: {              plugins: <span class="hljs-string">'D:/your/path/webpack_demo/src/plugins'</span>          }      }  }</code></pre>         <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">        <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>       </div> </li>       <li> <p>可以使用了</p>        <div contenteditable="false" tabindex="-1">         <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-comment">// src/index/index.js</span>  <span class="hljs-keyword">var</span> Dialog = <span class="hljs-built_in">require</span>(<span class="hljs-string">'plugins/dialog/dialog.js'</span>);</code></pre>         <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">        <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>       </div> <p>当 require() 的第一单词是 alias 中的,将被匹配。</p> </li>      </ul> </li>    </ol>    <h3>引入其它类型的文件</h3>    <p>webpack 的强大之处是,它允许你引入任何文件,比如:css, jpg, png. 那么,问题来了,对于不同的文件,它要怎么知道该如何分开处理呢?</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-regexp">//</span> webpack.config.js  <span class="hljs-built_in">module</span>.<span class="hljs-built_in">exports</span> = {      <span class="hljs-attribute">module</span>: {          <span class="hljs-attribute">loaders</span>: [{              <span class="hljs-attribute">test</span>: <span class="hljs-regexp">/\.css$/</span>,              <span class="hljs-attribute">loader</span>: <span class="hljs-string">'style!css'</span>          }, {              <span class="hljs-attribute">test</span>: <span class="hljs-regexp">/\.js$/</span>,              <span class="hljs-attribute">loader</span>: <span class="hljs-string">'babel'</span>          }]      }  };</code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>上面的配置是说,对于拓展名是 .css 的文件,使用加载器 style!css (这边中间有一个感叹号,意思是:先是用 css 加载器处理,然后使用 style 加载器处理)。完整的写法是: style-loader!css-loader , 其中, -loader 可以省略。而这里的, style-loader 和 css-loader 就需要你 npm 安装下了。</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-variable">$ </span>npm i style-loader -<span class="hljs-constant">D</span>  <span class="hljs-variable">$ </span>npm i css-loader -<span class="hljs-constant">D</span></code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>对于其它拓展名的处理,也是用同样的方式来处理。</p>    <h3>释放双手:自动编译 + 浏览器同步刷新</h3>    <p>你肯定希望,这样的功能。那么,开始吧,喝杯咖啡!</p>    <ol>     <li> <p>自动编译</p> <p>如果你只是想支持自动编译,那么很简单。只要运行 $ webpack -w 就可以开启它的自动编译功能。</p> </li>     <li> <p>用 webpack-dev-server 实现:自动编译 + 浏览器同步刷新</p>      <ul>       <li> <p>首先,你需要安装 webpack-dev-server 这个包。</p>        <div contenteditable="false" tabindex="-1">         <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-variable">$ </span>npm i webpack-dev-server -<span class="hljs-constant">D</span></code></pre>         <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">        <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>       </div> </li>       <li> <p>然后,我简单介绍下它: <a href="/misc/goto?guid=4959676961343349964" rel="nofollow,noindex">webpack-dev-server 文档</a></p>        <ul>         <li> <p>运行时,它会启动一个本地 Node 服务器,默认端口8080. 即:localhost:8080. 并且自动识别当前目录下的 webpack.config.js 文件,来作为 webpack 配置文件。</p> </li>         <li> <p>产出的编译后文件,不在 output.path 里,而在它自己定义的内存。</p> </li>         <li> <p>行内参数说明:</p>          <ul>           <li> <p>inline: 使用命令行模式。</p> </li>           <li> <p>content-base: 指定网站的根地址,如果你想指定为项目根目录,那么 --content-base ./</p> </li>           <li> <p>hot: 开启热替换。一般用在 React 和 Vue 当中,我们这里不用。</p> </li>          </ul> </li>        </ul> </li>      </ul> <p>好了,那么,启动它吧:</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs">$ webpack-dev-server  --inline --content-<span class="hljs-keyword">base</span> ./</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> <p>然后,你在浏览器中,访问 http://localhost:8080/views_dev/index.html 就会发现,你修改代码的时候,实时编译,并且浏览器同步刷新了。</p> </li>    </ol>    <h2>多页面打包</h2>    <p>现在,我们加一点点配置,让它支持多个页面打包。之前,它是这样的:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs">module.exports = {      <span class="hljs-comment">// 入口:要进行处理的实例(js)</span>      entry: <span class="hljs-string">'./src/pages/index/index.js'</span>,      <span class="hljs-comment">// 出口:输出配置</span>      output: {          <span class="hljs-comment">// 输出到哪个目录</span>          path: <span class="hljs-string">'./asset/dev/'</span>,          <span class="hljs-comment">// 静态资源的引用路径</span>          publicpath: <span class="hljs-string">'/asset/dev/'</span>,          <span class="hljs-comment">// 实例最终输出的名字</span>          filename: <span class="hljs-string">'[name].js'</span>      },      <span class="hljs-comment">// 其它配置...</span>  };</code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>现在,我们需要改下 entry 的配置,如下:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-tag">entry</span>: <span class="hljs-rules">{ <span class="hljs-rule"><span class="hljs-attribute">index</span>:<span class="hljs-value"> <span class="hljs-string">'./src/pages/index/index.js'</span>, list: <span class="hljs-string">'./src/pages/list/index.js'</span>, common: [ <span class="hljs-string">'./src/base/base.js'</span>, <span class="hljs-string">'./src/base/base.css'</span> ] </span></span></span>}</code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>上面的配置意思是,会独立打包3个实体。分别是 index, list, common. 知识点如下:</p>    <ol>     <li> <p>它支持多个文件打包在一起,如这里的 common 的配置。我们一般,用来放公共基础包。</p> </li>     <li> <p>我们看到 output.filename = [name].js ,这里的 [name] 取自于 entry 的 key 值。意味着,他们最终打包的输出是:</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs">webpack_demo  |<span class="hljs-comment">--asset</span>  |  |<span class="hljs-comment">--dev</span>  |  |  |<span class="hljs-comment">--index.js</span>  |  |  |<span class="hljs-comment">--list.js</span>  |  |  |<span class="hljs-comment">--common.js</span></code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>    </ol>    <h2>上线</h2>    <p>发布上线,需要做什么呢?也许是这样:</p>    <ol>     <li> <p>把静态资源生成到一个独立的目录下</p> </li>     <li> <p>压缩</p> </li>     <li> <p>加上 md5</p> </li>     <li> <p>html 和 css 中,引用的静态资源需要替换。</p> </li>    </ol>    <p>哈哈,或许你还能想到很多。我就上面4步来说下实现方式。开始之前,我们一般会这么做:新建一个 webpack 的配置文件,用来做上线发布的配置。比如,我们同样放在根目录下,命名 webpack.config.build.js . 此时,你可以这样做:</p>    <div contenteditable="false" tabindex="-1">     <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-variable">$ </span>webpack -p --config webpack.config.build.js</code></pre>     <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">    <span style="background-image:url(http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png); background:rgba(220,220,220,0.5)"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>   </div>    <p>这里的 -p 是 production 模式的意思,它会对 css, js 文件进行压缩。后面 --config 就是指定此次运行的配置文件。</p>    <p>然后,我们来解决上面的4个要求:</p>    <ol>     <li> <p>把静态资源生成到一个独立的目录下 + md5</p>      <div contenteditable="false" tabindex="-1">       <pre data-widget="codeSnippet">  <code class="language-basic hljs"><span class="hljs-comment">// webpack.config.build.js</span>  module.exports = {      output: {          path: <span class="hljs-string">'./asset/build/'</span>, <span class="hljs-comment">// 文件编译输出路径改成 build</span>          publicpath: <span class="hljs-string">'http://yourweb.com/asset/build/'</span>, <span class="hljs-comment">// 这里替换成线上实际地址,可以修改 css 中对图片资源的引用路径。</span>          filename: <span class="hljs-string">'[name]_[hash:5].js'</span> <span class="hljs-comment">// 生成的文件名字,加上了5位的 hash值。</span>      },      <span class="hljs-comment">// 其它配置...</span>  };</code></pre>       <img src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">      <span style="background:rgba(220, 220, 220, 0.5) url("http://www.open-open.com/lib/ckeditor/plugins/widget/images/handle.png") repeat scroll 0% 0%; display:block; left:0px; top:-15px"><img height="15" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" title="点击并拖拽以移动" width="15"></span>     </div> </li>     <li> <p>压缩。已经用 webpack -p 解决了。</p> </li>     <li> <p>替换静态资源的路径。可以用 webpack 的插件, html-webpack-plugin 来做。或者,你对 gulp 还是比较熟悉的话,用 gulp-prefix 来实现。这里就不详细写配置了。</p> </li>    </ol>    <p>然后,恭喜你看完了!</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000006649986</p>    <p> </p>    <p><span style="color:rgb(255, 255, 255)">Save</span></p>    
 本文由用户 colinshen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1471590235833.html
HTML 前端技术 webpack