脚本宝典收集整理的这篇文章主要介绍了

手动配置webpack

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。现在框架对于webpack都进行了</p> <p>集成,但是作为开发的我们,应该手动配置webpack,以此对其打包编译原理有更详细的认识。</p> <h2 id="articleHeader0">最简单的webpack配置</h2> <p><strong>webpack四个核心概念:</strong></p> <ul> <li>入口(en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a>)</li> </ul> <p>入口起点(en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a> po<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>t)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,</p> <p>webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。</p> <ul> <li>输出(output)</li> </ul> <p>output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本</p> <p>上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字</p> <p>段,来配置这些处理过程:</p> <ul> <li>loader</li> </ul> <p>loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以</p> <p>将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行</p> <p>处理。</p> <ul> <li>插件(<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s)</li> </ul> <p>loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压</p> <p>缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。</p> <p>想要使用一个插件,你只需要 require() 它,然后把它添加到 plug<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>s <a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>中。多数插件可以通过选项</p> <p>(<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 <a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> 操作</p> <p>符来创建它的一个实例。</p> <p><strong>webpack.config.js</strong></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="const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js' } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a> <span class="hljs-built_in">path</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a>: <span class="hljs-string">'./path/to/my/entry/file.js'</span>, <span class="hljs-built_in">output</span>: { <span class="hljs-built_in">path</span>: <span class="hljs-built_in">path</span>.resolve(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>, <span class="hljs-string">'dist'</span>), filename: <span class="hljs-string">'my-first-webpack.bundle.js'</span> } };</code></pre> <h2 id="articleHeader1">HtmlWebpackPlug<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a></h2> <p>HtmlWebpackPlugin简化了<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着</p> <p>编译而发生变化哈希的 webpack bundle 尤其有用。</p> <p><strong>安装</strong></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 html-webpack-plugin@2.30.1 --save-dev yarn add html-webpack-plugin@2.30.1 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> html-webpack-<span class="hljs-keyword"><a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a></span>@<span class="hljs-number">2.30</span><span class="hljs-number">.1</span> <span class="hljs-comment">--save-dev</span> yarn <span class="hljs-keyword">add</span> html-webpack-<span class="hljs-keyword">plugin</span>@<span class="hljs-number">2.30</span><span class="hljs-number">.1</span> <span class="hljs-comment">--dev</span></code></pre> <p><strong>基本用法</strong></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 HtmlWebpackPlugin = require('html-webpack-plugin'); var path = require('path'); module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'index_bundle.js' }, plugins: [new HtmlWebpackPlugin()] };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>); <span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-built_in">module</span>.exports = { entry: <span class="hljs-string">'index.js'</span>, output: { path: path.resolve(__dirname, <span class="hljs-string">'./dist'</span>), filename: <span class="hljs-string">'index_bundle.js'</span> }, plugins: [<span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> HtmlWebpackPlugin()] };</code></pre> <p>会生成一个包含以下内容的文件 dist/index.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="<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>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>webpack App</title><br /> </head><br /> <body><br /> <script src=&quot;index_bundle.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>webpack App<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"index_bundle.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <h2 id="articleHeader2"><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-loader</h2> <p>将<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>代码</p> <p><strong>安装</strong></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 babel-loader babel-core babel-preset-env --save-dev yarn add babel-loader@7.1.2 babel-core@6.26.0 babel-preset-env@1.6.1 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader babel-core babel-p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>-env <span class="hljs-comment">--save-dev</span> yarn <span class="hljs-keyword">add</span> babel-loader@<span class="hljs-number">7.1</span><span class="hljs-number">.2</span> babel-core@<span class="hljs-number">6.26</span><span class="hljs-number">.0</span> babel-preset-env@<span class="hljs-number">1.6</span><span class="hljs-number">.1</span> <span class="hljs-comment">--dev</span></code></pre> <p><strong>基本使用</strong></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: { rules: [ { test: /.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">module</span>: <span class="hljs-string">{</span> <span class="hljs-attr">rules</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">test</span>: <span class="hljs-string">/.js$/,</span> <span class="hljs-attr">exclude</span>: <span class="hljs-string">/(<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules|bower_components)/,</span> <span class="hljs-attr">use</span>: <span class="hljs-string">{</span> <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader',</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>s</span>: <span class="hljs-string">{</span> <span class="hljs-attr">presets</span>: <span class="hljs-string">['@babel/preset-env']</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span></code></pre> <h2 id="articleHeader3"><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-react</h2> <p><strong>安装</strong></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="yarn add babel-preset-react@6.24.1 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">yarn</span> <span class="hljs-selector-tag">add</span> <span class="hljs-selector-tag">babel-preset-react</span>@<span class="hljs-keyword">6</span>.<span class="hljs-keyword">24</span>.<span class="hljs-keyword">1</span> --dev</code></pre> <p><strong>基本使用</strong></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: { rules: [ { test: /.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env','react'] } } } ] }," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-attr">module</span>: <span class="hljs-string">{</span> <span class="hljs-attr">rules</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">test</span>: <span class="hljs-string">/.js$/,</span> <span class="hljs-attr">exclude</span>: <span class="hljs-string">/(node_modules)/,</span> <span class="hljs-attr">use</span>: <span class="hljs-string">{</span> <span class="hljs-attr">loader</span>: <span class="hljs-string">'babel-loader',</span> <span class="hljs-attr">options</span>: <span class="hljs-string">{</span> <span class="hljs-attr">presets</span>: <span class="hljs-string">['env','react']</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">},</span></code></pre> <h2 id="articleHeader4">style-loader css-loader</h2> <p>为了从 JavaScript 模块中 <a href="http://www.js-code.com/tag/import" title="import" target="_blank">import</a> 一个 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 文件,需要在 module 配置中 安装并添加 style-loader和 </p> <p>css-loader。</p> <p><strong>安装</strong></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 --save-dev style-loader css-loader yarn add style-loader@0.19.1 css-loader@0.28.8 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev style-loader css-loader</span> yarn <span class="hljs-keyword">add</span> <span class="hljs-keyword">style</span>-loader@<span class="hljs-number">0.19</span><span class="hljs-number">.1</span> css-loader@<span class="hljs-number">0.28</span><span class="hljs-number">.8</span> <span class="hljs-comment">--dev</span></code></pre> <p><strong>基本使用</strong></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="const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, + module: { + rules: [ + { + test: /.css$/, + use: [ + 'style-loader', + 'css-loader' + ] + } + ] + } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-built_in">module</span>.exports = { entry: <span class="hljs-string">'./src/index.js'</span>, output: { filename: <span class="hljs-string">'bundle.js'</span>, path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>) }, + <span class="hljs-keyword">module</span>: { + rules: [ + { + test: <span class="hljs-regexp">/.css$/</span>, + use: [ + <span class="hljs-string">'style-loader'</span>, + <span class="hljs-string">'css-loader'</span> + ] + } + ] + } };</code></pre> <h2 id="articleHeader5">ExtractTextWebpackPlugin</h2> <p>它会将所有的入口 chunk(entry chunks)中引用的 *.css,移动到独立分离的 <a href="http://www.js-code.com/tag/css" title="CSS" target="_blank">CSS</a> 文件。因此,你的样式将不</p> <p>再内嵌到 JS bundle 中,而是会放到一个单独的 <a href="http://www.js-code.com/tag/css" title="浏览关于“CSS”的文章" target="_blank" class="tag_link">CSS</a> 文件(即 styles.css)当中。 如果你的样式文件大小较</p> <p>大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。</p> <p><strong>安装</strong></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 --save-dev extract-text-webpack-plugin@1.0.1 yarn add extract-text-webpack-plugin@3.0.2 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save-dev extract-<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>-webpack-plugin@1.0.1</span> yarn <span class="hljs-keyword">add</span> <span class="hljs-keyword">extract</span>-<span class="hljs-built_in">text</span>-webpack-<span class="hljs-keyword">plugin</span>@<span class="hljs-number">3.0</span><span class="hljs-number">.2</span> <span class="hljs-comment">--dev</span></code></pre> <p><strong>基本使用</strong></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="const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;); module.exports = { module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: &quot;style-loader&quot;, use: &quot;css-loader&quot; }) } ] }, plugins: [ new ExtractTextPlugin(&quot;styles.css&quot;), ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> ExtractTextPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">"extract-text-webpack-plugin"</span>); <span class="hljs-built_in">module</span>.exports = { <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/.css$/</span>, use: ExtractTextPlugin.extract({ fallback: <span class="hljs-string">"style-loader"</span>, use: <span class="hljs-string">"css-loader"</span> }) } ] }, plugins: [ <span class="hljs-keyword">new</span> ExtractTextPlugin(<span class="hljs-string">"styles.css"</span>), ] }</code></pre> <h2 id="articleHeader6">sass-loader</h2> <p><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>-sass 和 webpack 是 sass-loader 的 peerDependency,因此能够精确控制它们的版本。</p> <p><strong>安装</strong></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 sass-loader node-sass webpack --save-dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> sass-loader node-sass webpack <span class="hljs-comment">--save-dev</span></code></pre> <p><strong>基本使用</strong></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="const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { module: { rules: [ { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', //如果需要,可以在 sass-loader 之前将 resolve-url-loader 链接进来 use: ['css-loader', 'sass-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('style.css') //如果想要传入选项,你可以这样做: //new ExtractTextPlugin({ // filename: 'style.css' //}) ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> ExtractTextPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'extract-text-webpack-plugin'</span>); <span class="hljs-built_in">module</span>.exports = { <span class="hljs-keyword">module</span>: { rules: [ { test: <span class="hljs-regexp">/.scss$/</span>, use: ExtractTextPlugin.extract({ fallback: <span class="hljs-string">'style-loader'</span>, <span class="hljs-comment">//如果需要,可以在 sass-loader 之前将 resolve-url-loader 链接进来</span> use: [<span class="hljs-string">'css-loader'</span>, <span class="hljs-string">'sass-loader'</span>] }) } ] }, plugins: [ <span class="hljs-keyword">new</span> ExtractTextPlugin(<span class="hljs-string">'style.css'</span>) <span class="hljs-comment">//如果想要传入选项,你可以这样做:</span> <span class="hljs-comment">//new ExtractTextPlugin({</span> <span class="hljs-comment">// filename: 'style.css'</span> <span class="hljs-comment">//})</span> ] }</code></pre> <h2 id="articleHeader7">font-awesome</h2> <p><span class="img-wrap"><img data-src="/img/bVbg2jO?w=1045&amp;h=212" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>Font Awesome 字体提供了可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。webpack中配置字体图标前需要提前引入font-awesome库,安装也很简单:</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="yarn add font-awesome" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">yarn</span> add font-awesome</code></pre> <h2 id="articleHeader8">url-loader</h2> <p>处理图片、字体图标,<code>url-loader</code> 功能类似于 <code>file-loader</code>,但是在文件大小(单位 <a href="http://www.js-code.com/tag/byte" title="byte" target="_blank">byte</a>)低于指定的限制时,可以返回一个 <code>DataURL</code>。</p> <p><strong>安装</strong></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="yarn add file-loader@1.1.6 url-loader@0.6.2 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">yarn</span> <span class="hljs-selector-tag">add</span> <span class="hljs-selector-tag">file-loader</span>@<span class="hljs-keyword">1</span>.<span class="hljs-keyword">1</span>.<span class="hljs-keyword">6</span> url-loader@<span class="hljs-number">0.6</span>.<span class="hljs-number">2</span> --dev</code></pre> <p><strong>基本使用</strong></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 = { module: { rules: [ // 图片的处理 { test: /.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] }, // 字体图标的处理 { test: /.(woff|woff2|eot|ttf|otf|svg)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs properties"><code><span class="hljs-meta">module.exports</span> = <span class="hljs-string">{</span> <span class="hljs-attr">module</span>: <span class="hljs-string">{</span> <span class="hljs-attr">rules</span>: <span class="hljs-string">[</span> <span class="hljs-meta">//</span> <span class="hljs-string">图片的处理</span> <span class="hljs-attr">{</span> <span class="hljs-attr">test</span>: <span class="hljs-string">/.(png|jpg|g<a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a>)$/,</span> <span class="hljs-attr">use</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">loader</span>: <span class="hljs-string">'url-loader',</span> <span class="hljs-attr">options</span>: <span class="hljs-string">{</span> <span class="hljs-attr">limit</span>: <span class="hljs-string">8192</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">},</span> <span class="hljs-meta">//</span> <span class="hljs-string">字体图标的处理</span> <span class="hljs-attr">{</span> <span class="hljs-attr">test</span>: <span class="hljs-string">/.(woff|woff2|eot|ttf|otf|svg)$/,</span> <span class="hljs-attr">use</span>: <span class="hljs-string">[</span> <span class="hljs-attr">{</span> <span class="hljs-attr">loader</span>: <span class="hljs-string">'url-loader',</span> <span class="hljs-attr">options</span>: <span class="hljs-string">{</span> <span class="hljs-attr">limit</span>: <span class="hljs-string">8192</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> <span class="hljs-attr">]</span> <span class="hljs-attr">}</span> <span class="hljs-attr">}</span></code></pre> <h2 id="articleHeader9">CommonsChunkPlugin</h2> <p><code>CommonsChunkPlugin</code> 插件,是一个可选的用于建立一个独立文件(又称作 <code>chunk</code>)的功能,这个文件包括多个入口 chunk 的公共模块。</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="new webpack.optimize.CommonsChunkPlugin(options); // 提出公共模块 new webpack.optimize.CommonsChunkPlugin({ // (公共 chunk(commnon chunk) 的名称) name: 'common', // (公共chunk 的文件名) filename: 'js/base.js' })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-keyword">new</span> webpack.optimize.<span class="hljs-type">CommonsChunkPlugin</span>(options); <span class="hljs-comment">// 提出公共模块</span> <span class="hljs-keyword">new</span> webpack.optimize.<span class="hljs-type">CommonsChunkPlugin</span>({ <span class="hljs-comment">// (公共 chunk(commnon chunk) 的名称)</span> name: <span class="hljs-symbol">'commo</span>n', <span class="hljs-comment">// (公共chunk 的文件名)</span> filename: <span class="hljs-symbol">'js</span>/base.js' })</code></pre> <h2 id="articleHeader10">webpack-dev-server</h2> <p>webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。</p> <p><strong>安装</strong></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="yarn add webpack-dev-server@2.9.7 --dev" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code style="word-break: break-word; white-space: initial;"><span class="hljs-selector-tag">yarn</span> <span class="hljs-selector-tag">add</span> <span class="hljs-selector-tag">webpack-dev-server</span>@<span class="hljs-keyword">2</span>.<span class="hljs-keyword">9</span>.<span class="hljs-keyword">7</span> --dev</code></pre> <p><strong>基本使用</strong></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=" const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', devServer: { // contentBase: './dist', // 修改端口号 port: 8086 }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Development' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code> <span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">const</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>); <span class="hljs-keyword">const</span> CleanWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'clean-webpack-plugin'</span>); <span class="hljs-built_in">module</span>.exports = { entry: { app: <span class="hljs-string">'./src/index.js'</span>, pr<a href="http://www.js-code.com/tag/int" title="浏览关于“int”的文章" target="_blank" class="tag_link">int</a>: <span class="hljs-string">'./src/print.js'</span> }, devtool: <span class="hljs-string">'inline-source-map'</span>, devServer: { <span class="hljs-comment">// contentBase: './dist',</span> <span class="hljs-comment">// 修改端口号</span> port: <span class="hljs-number">8086</span> }, plugins: [ <span class="hljs-keyword">new</span> CleanWebpackPlugin([<span class="hljs-string">'dist'</span>]), <span class="hljs-keyword">new</span> HtmlWebpackPlugin({ title: <span class="hljs-string">'Development'</span> }) ], output: { filename: <span class="hljs-string">'[name].bundle.js'</span>, path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>) } };</code></pre> <h2 id="articleHeader11">完整版webpack.config.js</h2> <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="const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;); module.exports = { entry: './src/app.jsx', output: { path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', filename: 'js/app.js' }, module: { rules: [ // react(jsx)处理 { test: /.jsx$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } }, // css处理 { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: &quot;style-loader&quot;, use: &quot;css-loader&quot; }) }, // scss处理 { test: /.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, // 图片的处理 { test: /.(png|jpg|gif)$/, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] }, //字体图标的处理 { test: /.(woff|woff2|eot|ttf|otf|svg)$/, use: [{ loader: 'url-loader', options: { limit: 8192, name: 'resource/[name].[ext]' } }] } ] }, plugins: [ // 处理html文件 new HtmlWebpackPlugin({ template: './src/index.html' }), // 独立css文件 new ExtractTextPlugin(&quot;css/[name].css&quot;), // 提出公共模块 new webpack.optimize.CommonsChunkPlugin({ name: 'common', filename: 'js/base.js' }) ], devServer: { // contentBase: './dist' port: 8086 }, };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>); <span class="hljs-keyword">const</span> HtmlWebpackPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'html-webpack-plugin'</span>); <span class="hljs-keyword">const</span> ExtractTextPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">"extract-text-webpack-plugin"</span>); <span class="hljs-built_in">module</span>.exports = { entry: <span class="hljs-string">'./src/app.jsx'</span>, output: { path: path.resolve(__dirname, <span class="hljs-string">'dist'</span>), <a href="http://www.js-code.com/tag/public" title="浏览关于“public”的文章" target="_blank" class="tag_link">public</a>Path: <span class="hljs-string">'/dist/'</span>, filename: <span class="hljs-string">'js/app.js'</span> }, <span class="hljs-keyword">module</span>: { rules: [ <span class="hljs-comment">// react(jsx)处理</span> { test: <span class="hljs-regexp">/.jsx$/</span>, exclude: <span class="hljs-regexp">/(node_modules)/</span>, use: { loader: <span class="hljs-string">'babel-loader'</span>, options: { presets: [<span class="hljs-string">'env'</span>, <span class="hljs-string">'react'</span>] } } }, <span class="hljs-comment">// css处理</span> { test: <span class="hljs-regexp">/.css$/</span>, use: ExtractTextPlugin.extract({ fallback: <span class="hljs-string">"style-loader"</span>, use: <span class="hljs-string">"css-loader"</span> }) }, <span class="hljs-comment">// scss处理</span> { test: <span class="hljs-regexp">/.scss$/</span>, use: ExtractTextPlugin.extract({ fallback: <span class="hljs-string">'style-loader'</span>, use: [<span class="hljs-string">'css-loader'</span>, <span class="hljs-string">'sass-loader'</span>] }) }, <span class="hljs-comment">// 图片的处理</span> { test: <span class="hljs-regexp">/.(png|jpg|gif)$/</span>, use: [{ loader: <span class="hljs-string">'url-loader'</span>, options: { limit: <span class="hljs-number">8192</span>, name: <span class="hljs-string">'resource/[name].[ext]'</span> } }] }, <span class="hljs-comment">//字体图标的处理</span> { test: <span class="hljs-regexp">/.(woff|woff2|eot|ttf|otf|svg)$/</span>, use: [{ loader: <span class="hljs-string">'url-loader'</span>, options: { limit: <span class="hljs-number">8192</span>, name: <span class="hljs-string">'resource/[name].[ext]'</span> } }] } ] }, plugins: [ <span class="hljs-comment">// 处理html文件</span> <span class="hljs-keyword">new</span> HtmlWebpackPlugin({ template: <span class="hljs-string">'./src/index.html'</span> }), <span class="hljs-comment">// 独立css文件</span> <span class="hljs-keyword">new</span> ExtractTextPlugin(<span class="hljs-string">"css/[name].css"</span>), <span class="hljs-comment">// 提出公共模块</span> <span class="hljs-keyword">new</span> webpack.optimize.CommonsChunkPlugin({ name: <span class="hljs-string">'common'</span>, filename: <span class="hljs-string">'js/base.js'</span> }) ], devServer: { <span class="hljs-comment">// contentBase: './dist'</span> port: <span class="hljs-number">8086</span> }, };</code></pre> <h2 id="articleHeader12"><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</h2> <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;name&quot;: &quot;react-e-commerce-manage&quot;, &quot;version&quot;: &quot;1.0.0&quot;, &quot;main&quot;: &quot;index.js&quot;, &quot;repository&quot;: &quot;&quot;, &quot;author&quot;: &quot;&quot;, &quot;license&quot;: &quot;MIT&quot;, &quot;scripts&quot;: { &quot;dev&quot;: &quot;node_modules/.bin/webpack-dev-server&quot;, &quot;build&quot;: &quot; node_modules/.bin/webpack&quot; }, &quot;devDependencies&quot;: { &quot;babel-core&quot;: &quot;6.26.0&quot;, &quot;babel-loader&quot;: &quot;7.1.2&quot;, &quot;babel-preset-env&quot;: &quot;1.6.1&quot;, &quot;babel-preset-react&quot;: &quot;6.24.1&quot;, &quot;css-loader&quot;: &quot;0.28.8&quot;, &quot;extract-text-webpack-plugin&quot;: &quot;3.0.2&quot;, &quot;file-loader&quot;: &quot;1.1.6&quot;, &quot;html-webpack-plugin&quot;: &quot;2.30.1&quot;, &quot;node-sass&quot;: &quot;^4.9.3&quot;, &quot;sass-loader&quot;: &quot;6.0.6&quot;, &quot;style-loader&quot;: &quot;0.19.1&quot;, &quot;url-loader&quot;: &quot;0.6.2&quot;, &quot;webpack&quot;: &quot;3.10.0&quot;, &quot;webpack-dev-server&quot;: &quot;2.9.7&quot; }, &quot;dependencies&quot;: { &quot;font-awesome&quot;: &quot;^4.7.0&quot;, &quot;react&quot;: &quot;16.2.0&quot;, &quot;react-dom&quot;: &quot;16.2.0&quot; } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs json"><code>{ <span class="hljs-attr">"name"</span>: <span class="hljs-string">"react-e-commerce-manage"</span>, <span class="hljs-attr">"version"</span>: <span class="hljs-string">"1.0.0"</span>, <span class="hljs-attr">"main"</span>: <span class="hljs-string">"index.js"</span>, <span class="hljs-attr">"repository"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"author"</span>: <span class="hljs-string">""</span>, <span class="hljs-attr">"license"</span>: <span class="hljs-string">"MIT"</span>, <span class="hljs-attr">"scripts"</span>: { <span class="hljs-attr">"dev"</span>: <span class="hljs-string">"node_modules/.bin/webpack-dev-server"</span>, <span class="hljs-attr">"build"</span>: <span class="hljs-string">" node_modules/.bin/webpack"</span> }, <span class="hljs-attr">"devDependencies"</span>: { <span class="hljs-attr">"babel-core"</span>: <span class="hljs-string">"6.26.0"</span>, <span class="hljs-attr">"babel-loader"</span>: <span class="hljs-string">"7.1.2"</span>, <span class="hljs-attr">"babel-preset-env"</span>: <span class="hljs-string">"1.6.1"</span>, <span class="hljs-attr">"babel-preset-react"</span>: <span class="hljs-string">"6.24.1"</span>, <span class="hljs-attr">"css-loader"</span>: <span class="hljs-string">"0.28.8"</span>, <span class="hljs-attr">"extract-text-webpack-plugin"</span>: <span class="hljs-string">"3.0.2"</span>, <span class="hljs-attr">"file-loader"</span>: <span class="hljs-string">"1.1.6"</span>, <span class="hljs-attr">"html-webpack-plugin"</span>: <span class="hljs-string">"2.30.1"</span>, <span class="hljs-attr">"node-sass"</span>: <span class="hljs-string">"^4.9.3"</span>, <span class="hljs-attr">"sass-loader"</span>: <span class="hljs-string">"6.0.6"</span>, <span class="hljs-attr">"style-loader"</span>: <span class="hljs-string">"0.19.1"</span>, <span class="hljs-attr">"url-loader"</span>: <span class="hljs-string">"0.6.2"</span>, <span class="hljs-attr">"webpack"</span>: <span class="hljs-string">"3.10.0"</span>, <span class="hljs-attr">"webpack-dev-server"</span>: <span class="hljs-string">"2.9.7"</span> }, <span class="hljs-attr">"dependencies"</span>: { <span class="hljs-attr">"font-awesome"</span>: <span class="hljs-string">"^4.7.0"</span>, <span class="hljs-attr">"react"</span>: <span class="hljs-string">"16.2.0"</span>, <span class="hljs-attr">"react-<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>m"</span>: <span class="hljs-string">"16.2.0"</span> } } </code></pre> <p></code></p>

总结

以上是脚本宝典为你收集整理的

手动配置webpack

全部内容,希望文章能够帮你解决

手动配置webpack

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过