这几步完全可以自动化，Webpack 就提供了一个本地开发 Web 服务器 webpack-dev-server, 它可以监听代码的改动并自动编译和发布，基本配置如下：
devServer: { contentBase: './dist/', // 资源根目录 host: '127.0.0.1', // 绑定主机 IP port: 3000, // 监听端口 writeToDisk: true // 将编译结果写到磁盘 },更多配置项可参考：https://webpack.js.org/configuration/dev-server/
接下来就是 Webpack 两个比较重要概念的配置, Loader 和 Plugin:
Loader: 编译和转换模块源码，比如将 scss 编译成 css, 将 ES6 转为 JS, 将 JSX 文件转成 JS 文件等等
Plugin: 用于解决 Loader 无法实现的功能，比如清理，打包优化和压缩等等
BabelBootstrap 4 使用 ES6 重写了所有的 JS 组件，而 Babel 就是一个 JavaScript 编译器，它可以将使用 ES6 语法编写的文件，转成浏览器兼容的 JS 文件。在 package.json 中与它相关的模块如下：
@babel/core: Babel 编译的核心
@babel/preset-env: 为每个环境预设的 Babel
babel-loader: 结合使用 Babel 和 webpack 编译 JavaScript
@babel/plugin-proposal-object-rest-spread: 支持 ES6 扩展运算符（...）
与把它相关的配置文件通常会放到一个名为 .babelrc.js 的文件中：
module.exports = { presets: [ [ '@babel/env', { loose: true, modules: false, exclude: ['transform-typeof-symbol'] } ] ], plugins: [ '@babel/plugin-proposal-object-rest-spread' ] }; CSS 模块Webpack 提供了两个 Loader 来处理样式，css-loader 和 style-loader，二者处理的任务不同：
css-loader: 解析 @import 和 url() 方法，实现类似 import/require() 的功能
style-loader: 将样式加入到页面中，与 css-loader 结合使用可以把样式嵌入到 webpack 打包后的 JS 文件中
CSS 预处理器比如 Sass 对原生 CSS 进行了扩展，添加了变量，函数等特性，使得 css 的编写更加灵活，Webpack 配置以下两个 Loader 后就能直接使用：
sass-loader: 将 scss 编译成 css
postcss-loader: 主要使用 autoprefixer 添加浏览器前缀
具体配置可查看上文的 webpack.config.js, 有一点需要注意的是: 高版本的 autoprefixer, 支持的浏览器配置通常放在 .browserslistrc 文件中。
mini-css-extract-plugin将 CSS 提取为独立文件的插件，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，支持 CSS 和 SourceMaps 的按需加载，依赖 Webpack 4 以上的版本。
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // 指定资源路径, 默认与 webpackOptions.output 相等 publicPath: '../', // 模块热加载相关配置 hmr: process.env.NODE_ENV === 'development', }, }, 'css-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional filename: '[name].css', chunkFilename: '[id].css', ignoreOrder: false, // Enable to remove warnings about conflicting order }), ], };更多配置项可参考：https://webpack.js.org/plugins/mini-css-extract-plugin/
clean-webpack-pluginWebpack 构建之前用于删除和清理构建文件夹的插件，这个插件有个属性 cleanOnceBeforeBuildPatterns 可以配置哪些文件和文件夹要删除，哪些不删除，一个简单的示例如下：
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { plugins: [ new CleanWebpackPlugin({ // 只清理 js 和 css 目录中的文件 cleanOnceBeforeBuildPatterns:['js/*', 'css/*'] }), ], };更多配置项可参考：https://www.npmjs.com/package/clean-webpack-plugin
Bootstrap 主题定制方法定制 Bootstrap 4 主题有两个方法，一是直接修改源码，但这样后续不好升级；二是修改它提供的 SCSS 变量灵活定制，这样对源码没有侵入性，可以在不触及核心文件的情况下完全重新设计 Bootstrap 4 的样式。项目文件的基本结构如下：
dunwoo-admin/ ├── .babelrc.js ├── .browserslistrc ├── .gitignore ├── package.json ├── webpack.config.js ├── README.md ├── src/ │ ├── scss/ │ │ ├── base/ │ │ ├── pages/ │ │ ├── partials/ │ │ ├── utilities/ │ │ ├── vendor/ │ │ └── _theme.scss │ ├── js/ │ │ ├── modules/ │ │ ├── vendor/ │ │ └── theme.js │ │── fonts/ │ └── img/ └── dist/ ├── css/ │ └── theme.css ├── js/ │ └── theme.js ├── img/ ├── fonts/ └── libs/