<hr/>

  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
</div>

复制代码 请使用css module，webpack配置css module的方式也十分简单：

'css-loader?modules&localIdentName=[name]-[hash:base64:5]',
复制代码
将 css-loader调整成以上内容即可。

file-loader
处理各种图标、图片文件

安装
yarn add file-loader --dev
复制代码
配置
修改webpack.config.js中，module下的rules，添加如下配置：

{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
复制代码
字体文件依旧由file-loader处理，继续添加配置：

{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
复制代码
loader暂时添加到这里，这时记住了没？想让webpack处理对应文件，就要有对应的loader。

继续刷新看我们的demo工程，生效了。

初识Plugin
loader配置完，继续按着文档来吧，看看我们还有什么可以了解的。

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！

插件目的在于解决 loader 无法实现的其他事。

html-webpack-plugin
管理输出中有这么一段：

如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

OK,了解了它的目的，有用，装！

安装
yarn add html-webpack-plugin --dev

复制代码
配置
在webpack.config.js的根节点中添加plugins:

// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
复制代码
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
复制代码
重启下npm run dev，你会发现页面空白了？卧槽，这不是坑么？打开控制台看一眼，Target container is not a DOM element.，再看一眼Elements选项卡中的内容，发现，咦。好像我们的

神奇的消失了。 再看文档，发现这么一句话：

如果你想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，那么你就应该多多熟悉 HtmlWebpackPlugin 仓库。 其中的配置项中，template这项是这么描述的： webpack require path to the template. Please see the docs for details

模板啊，我们把dist/index.html中的文件挪出来，放到项目的根目录下，然后再修改下webpack.config.js中的配置：

new HtmlWebpackPlugin({
title: 'Demo',
template: './index.html'
})
复制代码
重启下服务看看吧，npm run dev

页面出来了，但是报了个错：only one instance of babel-polyfill is allowed。 这又是什么错？我们明明只有一个entry，为什么说引了多次呢？打开Elements选项卡中，惊奇的发现，原来是我们刚才直接从dist目录中挪的index.html中，还存在<script src="./my-first-webpack.bundle.js"></script>这么一段script，删掉，再重启。大功告成。

clean-webpack-plugin
你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

依然有用，依然装！

安装
yarn add clean-webpack-plugin --dev
复制代码
配置
修改webpack.config.js： 引入CleanWebpackPlugin:

const CleanWebpackPlugin = require('clean-webpack-plugin');
复制代码
添加plugins：

new CleanWebpackPlugin(['dist']),
复制代码
区分生产环境与开发环境
为什么要区分生产环境与开发环境？

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

拆分webpack配置
按照官方教程，来进行拆分。在此，我更推荐新建config目录，将配置统一放置config中，所以此时我们的配置文件应该是：

config/webpack.common.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: ["babel-polyfill", "./index.js"],
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[contenthash:12].js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader?cacheDirectory"
},
{
test: /.css$/,
use: [
'style-loader',
"css-loader"
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../"),
}),
new HtmlWebpackPlugin({
title: 'Demo',
template: './index.html'
})
]
};
复制代码
config/webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, '../dist'),
compress: true,
port: 9000
}
});
复制代码
config/webpack.prod.js：

const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
mode: 'production',
});
复制代码
另外，package.json中的scripts也要进行相应的调整：

"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --config config/webpack.dev.js"
复制代码
关于分离css
extract-text-webpack-plugin【4.0已废弃】
tips: 这是一个从入门到放弃的Plugin，感兴趣的话可以继续跟着操作，没兴趣请跳至下个小节。

它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。

安装
yarn add extract-text-webpack-plugin --dev
复制代码
配置
照着文档中的🌰把配置贴进来，修为webpack.config.js：

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
mode: "production",
entry: ["babel-polyfill", "./index.js"],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader?cacheDirectory"
},
{
test: /.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};
复制代码
重启服务的时候，你会发现报错了？WTF？费了半天劲，结果还不能用？这时候我们需要注意一点，就是它曾经肯定是能用的，不然不能放到文档上，这就体现出来webpack文档落后了。既然如此，因为我们当下使用的是webpack 4.x的版本，这时候先去ExtractTextWebpackPlugin的github上搜搜有没有想过issue吧，关键词webpack 4。 看到一个issue。

@vasivas don't use extract-text-webpack-plugin for extract css, please use github.com/webpack-con…

竟然还有这种操作，那就看看这个mini-css-extract-plugin。

关于webpack，就引导到这里，本文不是对webpack进行讲解，更多关于webpack的部分，可以看： @花裤衩 写的文章：

手摸手，带你用合理的姿势使用webpack4（上）

手摸手，带你用合理的姿势使用webpack4（下）

最终我们关于分离css的内容变成如下： webpack.common.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
entry: ["babel-polyfill", "./index.js"],
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[contenthash:12].js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader?cacheDirectory"
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?modules&localIdentName=[name]-[hash:base64:5]',
]
},
{
test: /.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"], {
root: path.resolve(__dirname, "../"),
}),
new HtmlWebpackPlugin({
title: 'Demo',
template: './index.html'
}),
]
};
复制代码
webpack.prod.js：

const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash:12].css',
chunkFilename: '[name].[contenthash:12].css' // use contenthash *
})
]
});
复制代码
webpack.dev.js：

const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, '../dist'),
compress: true,
port: 9000
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
]
});
复制代码
代码分离
依旧看上面 @花裤衩 的文章，分的很细腻。在此我们简单分离：

在webpack.common.js中修改：

const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
],
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: "vendors",
priority: -20,
chunks: "all"
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash:12].css',
chunkFilename: '[name].[contenthash:12].css' // use contenthash *
})
]
});
复制代码
OK，看似完美。

React、Babel、webpack都有了，接下来就是为了自己与团队之间协作代码的规范性，要通过下一个工具了。

Eslint
官网

安装
npm install eslint -g #全局安装eslint
复制代码
初始化
eslint --init
复制代码
选择默认配置
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb (https://github.com/airbnb/javascript)
? Do you use React? Yes
? What format do you want your config file to be in? JavaScript
Checking peerDependencies of eslint-config-airbnb@latest
? The style guide "airbnb" requires eslint@^4.19.1. You are currently using [email protected].
Do you want to downgrade? Yes
复制代码
在此直接选择airbnb。

调整配置
在初次安装后，我们发现我们之前的App.js报错了，这时我们需要调整eslint相关的配置规则，来让它更符合我们预期的使用： 打开.eslintrc.js文件，调整内容如下：

module.exports = {
"extends": "airbnb",
"plugins":[
"react",
"jsx-a11y",
"import"
],
"rules": {
"import/no-extraneous-dependencies": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/prop-types": 0
}
};
复制代码
更多eslint的使用姿势，还需要你个人进行探索。

引入ant-design
官网

安装
yarn add antd
复制代码
按需加载
若不想每次引用css时，可选用，在这里使用babel-plugin-import：

yarn add babel-plugin-import --dev
复制代码
修改.babelrc文件中修改为：

{
"presets": ["env", "react"],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
]
}
复制代码
试用
在App.js中，进行引用：

import { DatePicker } from 'antd';

const Home = () => (

); 复制代码 刷新后我们发现，组件是显示出来了，但是样式并没有生效。继续去找解决方案： www.jianshu.com/p/603a61471… 这位老哥写的很清楚了，原来是我们的rules配置还有点瑕疵，根据内容调整如下：

{
test: /.css$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'css-loader?modules&localIdentName=[name]-[hash:base64:5]',
],
},
{// antd样式处理
test: /.css$/,
exclude: /src/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
],
},
复制代码
调整完后，重启webpack。