Bootstrap 是一个流行的前端样式库，可以方便快速的构建应用，但默认样式可能不尽人意，本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题。版本使用的是 Bootstrap v4.3.1。
本文提供了一个使用此方式编写的一个后台管理模板 Dunwoo Admin，文末有获取源码的方式。
Webpack 是对前端资源进行打包和编译的工具，它依赖于 Node.js，首先介绍下如何配置和安装绿色版的 Node.js。
下载绿色版本：https://nodejs.org/en/download/ （以 node-v10.16.1-win-x64.zip 为例）
并解压到某个目录下，比如 D:\node-v10.16.1, 然后设置系统环境变量：
NODE_HOME=D:\node-v10.16.1 NODE_PATH=%NODE_HOME%\node_modules path=增加;%NODE_HOME%;在 Node.js 主目录新建 node_global 和 node_cache 两个目录，并使用以下命令设置 npm 全局安装模块的位置以及下载缓存路径：
npm config set prefix "D:\node-v10.16.1\node_global" npm config set cache "D:\node-v10.16.1\node_cache"最后，可以在命令行使用 node -v 和 npm -v 验证是否安装成功。
Webpack 安装和配置安装 Webpack 之前，需要使用 npm init 在项目根目录生成一个 package.json 文件，它类似 Java 中 Maven 的 pom.xml, 用于描述项目的元信息，名称、版本等，更重要的是它指定了项目运行依赖的模块，下面就是本项目此文件的内容：
{ "name": "dunwoo-admin", "version": "1.0.0", "description": "Bootstrap 4 Theme", "author": "wskwbog", "license": "MIT", "private": true, "keywords": [], "scripts": { "build": "webpack --progress --colors", "dev": "webpack-dev-server --inline --devtool eval-source-map --progress", "start": "npm run dev" }, "devDependencies": { "@babel/core": "^7.2.2", "@babel/plugin-proposal-object-rest-spread": "^7.3.2", "@babel/preset-env": "^7.3.1", "autoprefixer": "^9.4.7", "babel-loader": "^8.0.6", "css-loader": "^3.2.0", "node-sass": "^4.12.0", "postcss-loader": "^3.0.0", "sass-loader": "^7.2.0", "style-loader": "^1.0.0", "webpack": "^4.39.2", "webpack-cli": "^3.3.7", "webpack-dev-server": "^3.8.0", "mini-css-extract-plugin": "^0.8.0", "clean-webpack-plugin": "^3.0.0" }, "dependencies": { "bootstrap": "^4.3.1", "jquery": "^3.3.1", "popper.js": "^1.14.7" } }其中关键配置的意义是：
scripts: 配置不同功能脚本命令的缩写，可以使用 npm run build|dev 简单方便的调用
devDependencies: 指定项目开发所需要的模块
dependencies: 指定项目运行所依赖的模块
配置好 package.json 后就可以在当前目录运行 npm install 依赖的模块就会下载到当前目录的 node_modules 目录中。
在开始使用 Webpack 之前，还要进行一些配置，这也是比较麻烦的地方，本项目的 webpack.config.js 配置内容如下：
// 引入 node 相关模块 const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', devtool: 'source-map', entry: { theme: './src/js/theme.js' // 入口文件 }, output: { // 打包输出目录 path: path.resolve(__dirname, './dist/'), filename: 'js/[name].js' }, devServer: { // 本地开发服务器 contentBase: './dist/', host: '0.0.0.0', port: 3000, writeToDisk: true }, module: { rules: [{ test: /(\.jsx|\.js)$/, // 正则匹配 .jsx 或 .js 后缀的文件 loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(scss)$/, // 正则匹配 .scss 后缀的文件 use: [{ // loader: 'style-loader', // inject CSS to page loader: MiniCssExtractPlugin.loader, options: { // publicPath: '../', // hmr: process.env.NODE_ENV === 'development', }, }, { loader: 'css-loader', // translates CSS into CommonJS modules }, { loader: 'postcss-loader', // Run postcss actions options: { plugins: function () { // postcss plugins, can be exported to postcss.config.js return [ require('autoprefixer') ]; } } }, { loader: 'sass-loader' // compiles Sass to CSS }] }] }, plugins: [ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns:['js/*', 'css/*'] }), new MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: 'css/[id].css', }) ] }接下来分析下各配置项的作用。
entry/output entry: { theme: './src/js/theme.js' }, output: { path: path.resolve(__dirname, './dist/'), filename: 'js/[name].js' },入口（entry）和出口（output）的配置比较简单，指定了从哪个模块开始构建以及将编译结果输出目的地。其中 **__dirname** 表示 webpack.config.js 所在的目录。
webpack-dev-server通常开发的过程是：
修改 scss 样式
然后命令行运行 npm run build 编译
最后刷新页面看效果