开始工作
如果需要一直输入 npm run build
确实是一件非常无聊的事情,幸运的是,我们可以把让他安静的运行,让我们设置 webpack-dev-server
。
设置 webpack-dev-server
第一步,输入 npm i webpack-dev-server --save
,此外,我们需要去调整 package.json
scripts 部分去包含这个指令,下面是基本的设置:
package.json
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
}
}
当你在命令行里运行 npm run dev
的时候他会执行 dev 属性里的值。这是这些指令的意思:
webpack-dev-server
- 在 localhost:8080 建立一个 Web 服务器--devtool eval
- 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号--progress
- 显示合并代码进度--colors
- Yay,命令行中显示颜色!--content-base build
- 指向设置的输出目录
总的来说,当你运行 npm run dev
的时候,会启动一个 Web 服务器,然后监听文件修改,然后自动重新合并你的代码。真的非常简洁!
访问 http://localhost:8080 你会看到效果。