前端工程不了解？带你踩坑加爬坑。

内容简介：本文希望能帮助那些一直用脚手架而对工程化没有概念的朋友。文中许多步骤会在运行时报错，从错误中分析需要添加的配置，加深印象以及对所添加的每一行配置的理解。本文将以

本文希望能帮助那些一直用脚手架而对工程化没有概念的朋友。

文中许多步骤会在运行时报错，从错误中分析需要添加的配置，加深印象以及对所添加的每一行配置的理解。

本文将以 React 为例，带你走一次。

创建目录

mkdir demo && cd demo
npm init
touch index.js
复制代码

webpack

安装webpack依赖

yarn add webpack webpack-cli --dev # 安装webpack相关依赖
touch webpack.config.js # 新建webapck配置文件
复制代码

修改配置

这是一份最基本的webpack配置：

const path = require('path');

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};
复制代码

调整package.json

在package.json中，添加 scipts 如下：

"scripts": {
	"build": "webpack"
},
复制代码

初试build

在命令行中执行

npm run build
复制代码

你会看到如下警告：

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/concepts/mo…

由于 webpack 在4.0后，新增mode配置项，它为我们默认设置了 production 。但是该警告并没有影响 build 的结果暂且忽略。可以看到 dist 目录已经生成了名为 my-first-webpack.bundle.js 文件。

OK，最基本的配置已经完成，接下来引入React。

React

安装react依赖

yarn add react react-dom # 安装react相关依赖
复制代码

使用

在使用前，需要在dist目录中，添加 index.html ，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./my-first-webpack.bundle.js"></script>
  </body>
</html>

复制代码

从react官网官网找段HelloWorld贴过来吧，全英文看不懂？没关系，代码你总认识吧，贴就完了！

将 index.js 中的内容变更如下：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
复制代码

OK，看似完美，执行下， build 看看效果。

ERROR in ./index.js 4:16
Module parse failed: Unexpected token (4:16)
You may need an appropriate loader to handle this file type.
| import ReactDOM from 'react-dom';
|
> ReactDOM.render(<div>Hello World</div>,
|   document.getElementById('root'));
复制代码

报错了？莫慌，从错误信息中找关键字， You may need an appropriate loader to handle this file type. 。这时候感慨一句，程序员是伟大的，错误信息很详细了，告诉我们需要适当的 loader 来处理这个文件。什么 loader ？别问我，不是我干的，继续往下看刚才的链接下一小节react-jsx的介绍，拉到最下面，是不是有一段关于官方的建议？继续查找关键字，是不是看到一个叫 Babel 的东西？纳尼，莫非 jsx 和它有关系？虽然这段话是说推荐编辑器设置的吧，但是程序员必备一颗好奇的心。

Babel

Google一下上面的关键词 Babel ，进去瞅瞅吧。于是开始接触一个新名词 Babel ，这玩意干啥的？能为我们带来什么？看看首页吧。

ES2015 及更高版本

Babel 通过语法转换器支持最新版本的 JavaScript 。
Polyfill

由于 Babel 只转换语法(如箭头函数)，你可以使用 babel-polyfill 支持新的全局变量，例如 Promise 、新的原生方法。
JSX 和 Flow

Babel 能够转换 JSX 语法并去除类型注释。
可插拔

Babel 是建立在插件之外的。你可以使用已有的插件或者自己编写插件来组成属于你自己的转换管道。
可调式

支持 Source map 因此可以轻松调试编译后代码。

看完首页的介绍，是否和我有同样的感叹：好东西啊！既然是好东西，用起来吧。从配置的 webpack 选项中，你会发现刚才出现的两个关键字都来了 babel 、 loader ，艾玛，得来全不费工夫。

yarn add babel-loader babel-core babel-preset-env babel-polyfill babel-preset-react --dev 
# 这波安装比较长？因为我们把刚才看到的es2015、更高版本语法的，polyfill，jsx的都装上了
复制代码

通过 `config` 配置

将 webpack.config.js 修改配置如下：

const path = require('path');

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  }
};
复制代码

创建 `.babelrc` 配置文件

touch .babelrc #创建.babelrc
复制代码

将以下内容粘贴至 .babelrc 中：

{
  "presets": ["env", "react"]
}
复制代码

至此，已经将上面的 babel-preset-env 、 babel-preset-react 使用上了，那 polyfill 怎么用呢？继续看波文档吧。emmm，写的很清楚了，我们把 polyfill 使用上吧，修改 webpack.config.js 中的配置如下：

const path = require('path');

module.exports = {
  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" }
    ]
  }
};
复制代码

该配置的都配置完了，执行下 npm run build 看看效果？果不其然，编译过了。

你以为工程就这样配完了吗？NO，这仅仅是个开始！

react-router

SPA工程中使用，什么是SPA，单页应用？什么是单页应用？只有一个html，公用js css仅引用一次，通过局部刷新渲染的应用。

react-router官网，按着快速上手的步骤来。

安装

yarn add react-router-dom
复制代码

使用

Now you can copy/paste any of the examples into src/App.js. Here’s the basic one:

这里从 create-react-app 中使用方式，虽然我们不是，但是我们自己搭的也不差啊。自己建个 src 和 App.js 吧。

mkdir src && touch src/App.js
复制代码

将官方的:chestnut:贴进来 App.js ：

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.path}/:topicId`} component={Topic}/>
    <Route exact path={match.path} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample
复制代码

接下来在 index.js 中引用：

import React from 'react'
import ReactDOM from 'react-dom';
import App from './src/App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
复制代码

执行 npm run build 看看。没报错，使用浏览器打开 dist/index.html 看看。点击链接没反应？什么情况？莫慌，打开控制台看看：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///' cannot be created in a document with origin 'null' and URL

emmmm，咋整？别问我，真不是我干的… 既然chrome不好使，就再看一眼safari下好不好用吧，一样不好使，再看一眼报错信息。

[Error] SecurityError: Blocked attempt to use history.pushState() to change session history URL from file:///demo/dist/index.html to file:///about. Paths and fragments must match for a sandboxed document.

好像safari的报错更友好一些，我们可以清楚的看到，它在试图改变链接，为了安全起见，你认为这么做合理么？岂不是拿个html能访问计算机任何文件了？emmm，果然不合理。再看关键词: Paths and fragments must match for a sandboxed document 。

那我们就构建个沙盒环境吧。

webpack-dev-server

配置参考链接

安装

yarn add webpack-dev-server --dev
复制代码

修改配置

在 package.json 中添加 scripts ：

"dev": "webpack-dev-server"
复制代码

在 webpack.config.js 根节点 中，添加：

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
复制代码

执行上面刚添加的 srcripts ：
```
npm run dev
复制代码
```
浏览器中打开链接 localhost:9000

功能没问题，样式没法忍，有木有？改！

在样式中新建 app.css 文件，新增如下内容：
```
.container {
  list-style: none;
}
复制代码
```

2. 在`App.js`中，添加如下代码：

	``` js
	import './app.css';
	```

3. 将`BasicExample`中的`ul`应用样式：

	``` html
	<ul className="container">
		<li><Link to="/">Home</Link></li>
		<li><Link to="/about">About</Link></li>
		<li><Link to="/topics">Topics</Link></li>
	</ul>
	```
这时，你会发现一个熟悉的错误。
> You may need an appropriate loader to handle this file type.

这次我们可以很快的定位到，缺少加载`css`相关的`loader`。

## 再次与`loader`相遇
[webpack相关文档](https://www.webpackjs.com/guides/asset-management/#%E5%8A%A0%E8%BD%BD-css)
虽然，`webpack`的文档总是那么的不及时，但是一些基础性的东西，还是能从中学到的。既然又一次遇到了`loader`，不妨这次我们就彻底搞明白什么是`loader`，它为我们提供了什么？
> loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建 工具 中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

看完这么长一段，我总结了一句话，通过`import`来处理的文件，需要对应的loader。既然如此，那就一个一个安吧。

### `css-loader`

#### 安装
``` bash
yarn add style-loader css-loader --dev
复制代码

配置

修改 webpack.config.js 中， module 下的 rules ，就像添加 babel-loader 一样，添加如下配置：

{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  }
复制代码

关于css-loader这里要再多提一句，当你不想对全局css进行污染，想通过以下方式使用时：

import styles from 'app.css';

<div className={styles.container} />
复制代码

请使用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 :

plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management'
    })
  ],
复制代码

重启下 npm run dev ，你会发现页面空白了？卧槽，这不是坑么？打开控制台看一眼， Target container is not a DOM element. ，再看一眼 Elements 选项卡中的内容，发现，咦。好像我们的 <div id="root"></div> 神奇的消失了。再看文档，发现这么一句话：

如果你想要了解更多 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
复制代码

配置

照着文档中的:chestnut:把配置贴进来，修为 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 eslint@5.2.0.
  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 = () => (
  <div>
    <h2>
      <DatePicker />
    </h2>
  </div>
);
复制代码

刷新后我们发现，组件是显示出来了，但是样式并没有生效。继续去找解决方案： 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 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

分享经济的爆发

阿鲁·萨丹拉彻 / 周恂 / 文汇出版社 / 2017-4-1 / 59.00元

◆了解分享经济，读这本就够了！解读了全球几乎所有成功的分享经济案例。 ◆国家多次提出“发展分享经济”“分享经济是经济新常态的国家战略”。 ◆全球分享经济泰斗揭示分享经济将从哪些方面重构我们的生活。 ◆作者是分享经济领域的泰斗，纽约大学斯特恩商学院教授。 ◆全球分享经济理论热门著作！ ◆滴滴CEO程维亲自作序力荐！ ◆谷歌、《时代周刊》、《纽约时报》、《华尔街日......一起来看看《分享经济的爆发》这本书的介绍吧!

码农工具

前端工程不了解？带你踩坑加爬坑。

创建目录

webpack

安装webpack依赖

修改配置

调整package.json

初试build

React

安装react依赖

使用

Babel

通过 config 配置

创建 .babelrc 配置文件

react-router

安装

使用

webpack-dev-server

安装

修改配置

配置

file-loader

安装

配置

初识Plugin

html-webpack-plugin

安装

配置

clean-webpack-plugin

安装

配置

区分生产环境与开发环境

拆分webpack配置

关于分离css

extract-text-webpack-plugin【4.0已废弃】

安装

配置

代码分离

Eslint

安装

初始化

选择默认配置

调整配置

引入 ant-design

安装

按需加载

试用

分享经济的爆发

JS 压缩/解压工具

Base64 编码/解码

XML 在线格式化

通过 `config` 配置

创建 `.babelrc` 配置文件

`file-loader`

引入 `ant-design`