webpack搭建本地服务器
有勇气的牛排
1050
前端
2021-11-21 01:24:57
1 介绍
（1）contentBase：为哪一个文件夹提供本地服务，默认是跟文件夹，我们这里可以填写./dist
（2）port：端口号
（3）inline：页面实时刷新
（4）historyApiFallback：在SPA页面中，依赖HTML5的history模式
2 安装
# 安装，提供一个开发时服务
npm install webpack-dev-server@2.9.3 --save-dev
webpack.config.js
module.exports = {
...
devServer: {
contentBase: './dist',
inline: true
}
}
3 启动
# 初始命令
.\node_modules\.bin/webpack-dev-server
# 脚本化（package.json中的scripts设置）
"dev":"webpack-dev-server --open"
<h2><a id="1__0"></a>1 介绍</h2>
<ul>
<li>
<p>基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。</p>
</li>
<li>
<p>deserver也是作为webpack中的一个选项，选项本身可以设置如下属性</p>
</li>
</ul>
<p>（1）contentBase：为哪一个文件夹提供本地服务，默认是跟文件夹，我们这里可以填写<code>./dist</code></p>
<p>（2）port：端口号</p>
<p>（3）inline：页面实时刷新</p>
<p>（4）historyApiFallback：在SPA页面中，依赖HTML5的history模式</p>
<h2><a id="2__14"></a>2 安装</h2>
<pre><div class="hljs"><code class="lang-shell"><span class="hljs-meta"># </span><span class="language-bash">安装，提供一个开发时服务</span>
npm install webpack-dev-server@2.9.3 --save-dev
</code></div></pre>
<p>webpack.config.js</p>
<pre><div class="hljs"><code class="lang-js"><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
...
<span class="hljs-attr">devServer</span>: {
<span class="hljs-attr">contentBase</span>: <span class="hljs-string">'./dist'</span>,
<span class="hljs-attr">inline</span>: <span class="hljs-literal">true</span>
}
}
</code></div></pre>
<h2><a id="3__33"></a>3 启动</h2>
<pre><div class="hljs"><code class="lang-shell"><span class="hljs-meta"># </span><span class="language-bash">初始命令</span>
.\node_modules\.bin/webpack-dev-server
<span class="hljs-meta">
# </span><span class="language-bash">脚本化（package.json中的scripts设置）</span>
"dev":"webpack-dev-server --open"
</code></div></pre>
留言