简介
fe-dev-server 是一个基于 webpack-dev-server 的 npm 包，用于在本地搭建前端开发环境。它提供了自动化的配置和构建工具，使得前端开发者可以专注于业务逻辑而不是底层构建工具的配置。
安装
我们可以通过 npm 安装 fe-dev-server：
npm install fe-dev-server --save-dev
使用
配置文件
在项目根目录下创建一个名为 fe-dev-server.config.js 的文件。该文件将存储你的构建配置。
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}命令行
使用 npm script 启动 dev server：
"scripts": {
"start": "fe-dev-server"
}执行：
npm run start
配置说明
我们从配置文件的角度来看一下 fe-dev-server 的几个重要的配置项
entry
入口文件。可以是字符串，也可以是字符串组成的数组。
entry: './src/index.js' // 单个入口 entry: ['./src/index.js', './src/some-other-entry.js'] // 多个入口
output
出口文件配置。其中 filename 字段是必须的。
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}resolve
用于配置可以被解析的文件后缀和模块路径。
resolve: {
extensions: ['.js', '.jsx', '.scss'],
alias: {
'@': path.resolve(__dirname, 'src') // @ 代表项目 src 目录
}
}devServer
用于配置 webpack-dev-server 的相关配置。
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}使用建议
在实际使用中，可以结合其它插件和工具，以更好的发挥 fe-dev-server 的作用。比如：
html-webpack-plugin
会自动生成 html 文件，并引入 bundle.js。
-- -------------------- ---- -------
----- ----------------- - ------------------------------
-------------- - -
-- ---
-------- -
--- -------------------
------ --- -----
--------- ---------------- -- ------
--
-
-mini-css-extract-plugin
用于将 css 文件从 bundle.js 中抽离出来，独立成单个文件。
-- -------------------- ---- -------
----- -------------------- - ----------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
--------- ------------
--
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
--
--
--
-babel
用于转译 ES6+ 的 JavaScript 代码，以兼容旧的浏览器。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- -----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-总结
fe-dev-server 是一个非常方便的前端开发工具，它可以给我们省去很多底层的构建工具配置，让我们可以更加专注于业务逻辑的开发。建议结合其它插件和工具，以更好的发挥其作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/71718