webpack插件plugin 添加版权 打包html js压缩
有勇气的牛排
1068
前端
2021-11-20 23:37:35
文章目录
1 添加版权
webpack.config.js
onst webpack = require('webpack')
module.exports = {
...
plugins: [
new webpack.BannerPlugin('最终版权归AAA所有')
]
}
2 打包html
- 目前，我们的index.html文件存放在项目的根目录下
- HtmlWebpackPlug插件可以为我们做以下事情
- 安装
npm install html-webpack-plugin@3.2.0 --save-dev
4.使用插件，修改webpack.config.js文件中的plugins部分的内容如下
plugins: [
new webpack.BannerPlugin('最终版权归AAA所有')
new HtmlWebpackPlugin({
template: 'index.html'
})
]
3 js压缩
npm install uglifyjs-webpack-plugin --save-dev
const uglifuJsPlugin = require('uglifujs-webpack-plugin')
plugins: [
new uglifyJsPlugin()
]
<p><h3>文章目录</h3><ul><ul><li><a href="#1__2">1 添加版权</a></li><li><a href="#2_html_16">2 打包html</a></li><li><a href="#3_js_53">3 js压缩</a></li></ul></ul></p>
<h2><a id="1__2"></a>1 添加版权</h2>
<p>webpack.config.js</p>
<pre><div class="hljs"><code class="lang-js">onst webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack'</span>)
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
...
<span class="hljs-attr">plugins</span>: [
<span class="hljs-keyword">new</span> webpack.<span class="hljs-title class_">BannerPlugin</span>(<span class="hljs-string">'最终版权归AAA所有'</span>)
]
}
</code></div></pre>
<h2><a id="2_html_16"></a>2 打包html</h2>
<ol>
<li>目前，我们的index.html文件存放在项目的根目录下</li>
</ol>
<ul>
<li>
<p>真实发布项目时，发布的是dist文件夹中的内容，但是dist文件夹中如果没有index.html文件，name打包的js等文件就没有意义了。</p>
</li>
<li>
<p>所以，我们需要将index.html文件导包放到dist文件夹中，这个时候就可以使用HtmlWebpackPlugin插件。</p>
</li>
</ul>
<ol start="2">
<li>HtmlWebpackPlug插件可以为我们做以下事情</li>
</ol>
<ul>
<li>
<p>自动生成一个index.html文件（可以指定模板来生成）</p>
</li>
<li>
<p>将打包的js文件，自动通过script标签插入到body中。</p>
</li>
</ul>
<ol start="3">
<li>安装</li>
</ol>
<pre><div class="hljs"><code class="lang-shell">npm install html-webpack-plugin@3.2.0 --save-dev
</code></div></pre>
<p>4.使用插件，修改webpack.config.js文件中的plugins部分的内容如下</p>
<ul>
<li>
<p>这里的template表示根据什么模板来生成index.html</p>
</li>
<li>
<p>另外，我们需要删除之前在output中添加的publicPath属性</p>
</li>
<li>
<p>否则插入的script标签中的src可能会有问题</p>
</li>
</ul>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-attr">plugins</span>: [
<span class="hljs-keyword">new</span> webpack.<span class="hljs-title class_">BannerPlugin</span>(<span class="hljs-string">'最终版权归AAA所有'</span>)
<span class="hljs-comment">// new HtmlWebpackPlugin()</span>
<span class="hljs-keyword">new</span> <span class="hljs-title class_">HtmlWebpackPlugin</span>({
<span class="hljs-attr">template</span>: <span class="hljs-string">'index.html'</span>
})
]
</code></div></pre>
<h2><a id="3_js_53"></a>3 js压缩</h2>
<pre><div class="hljs"><code class="lang-shell">npm install uglifyjs-webpack-plugin --save-dev
</code></div></pre>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-keyword">const</span> uglifuJsPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'uglifujs-webpack-plugin'</span>)
<span class="hljs-attr">plugins</span>: [
<span class="hljs-keyword">new</span> <span class="hljs-title function_">uglifyJsPlugin</span>()
]
</code></div></pre>
留言