npm包是Node.js的最大模块仓库，拥有了大量的第三方模块，极大地便利了前端开发者。slush-webpack-html作为一个基于webpack的前端开发脚手架，可以为前端开发者提供快速搭建项目、自动化打包、监视文件变化等便利性，同时也可以处理好前后端分离的痛点。本文将介绍如何使用npm包slush-webpack-html。
安装
首先，你需要先安装global的slush和gulp。
通过以下命令来安装：
npm install -g slush gulp
接着，需要安装slush-webpack-html和webpack：
npm install -g slush-webpack-html webpack
npm包已经安装成功。接着需要新建一个项目文件夹，并在该目录下执行以下命令：
slush webpack-html
这个命令会询问一些问题，根据自己的需求来选择即可。这个过程可能需要几分钟或更长时间，因为它需要下载所有必要的依赖项并生成所需的项目结构。
配置
在项目中，可以通过修改webpack.config.js文件来改变某些设置。例如，你可以更改输出文件的目录，或添加一个插件来将CSS文件分离出来。以下是一些基本设置的示例：
output.path
输出文件的路径。默认为“./dist”。
output: {
path: path.resolve(__dirname, "./build")
}plugins
插件是webpack中用于增强功能和优化项目的组件。如果需要修改webpack的默认行为，就可以使用插件。例如：
plugins: [ new webpack.optimize.UglifyJsPlugin() ]
这里使用了UglifyJsPlugin，用于压缩JavaScript代码。
devServer
webpack-dev-server是开发环境的服务器，它会自动重新加载页面以显示最新的更改。以下是一些常用的devServer选项：
devServer: {
contentBase: "./dist",
port: 9000,
hot: true
}contentBase是开发服务器的根目录。port是开发服务器监听的端口。hot用于启用热替换，以在不刷新整个页面的情况下替换更新的模块。
构建
使用以下命令将webpack应用于源文件：
webpack
如果要在“开发”模式下启动webpack，请使用以下命令：
webpack-dev-server
然后在浏览器中打开http://localhost:8080，便可以看到你的项目了。
结束语
本文介绍了使用npm包slush-webpack-html的基本流程，以及webpack.config.js文件的基本设置。通过这些简单的设置，开发者可以快速启动一个前端开发项目并进行构建。而这也只是webpack的一小部分。在使用时可以查看webpack文档以获取更多信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d681e8991b448e02e3