一锅烩了那些React项目开发绕不过去的配置

写 React 已经有一段时间了，从开始到现在都是一路摸爬滚打过来的，踩过不少坑。虽然学习 React 已经很久了，但是和真正写还是有很大区别的，今天就从头开始记录下使用过程的点点滴滴，权且当作学习笔记吧，也希望能给将要入坑的小伙伴一点点启示吧！

前言

习惯了使用Vue开发的小伙伴，如果突然切换到React技术栈，刚开始肯定会有些手足无措，因为相比Vue的脚手架Vue-cli，React官方提供的脚手架工具create-react-app则显得没有那么友好。在Vue-cli中，如果想要扩展webpack配置，只需要在项目的根目录新建一个vue.config.js文件，在该文件中进行配置即可。但是create-react-app则没有那么简单，它把所有的webpack配置都集成在了react-scripts的依赖包中，我们无法直接修改的，官方提供了一个npm run eject命令可以执行脚本将react-scripts配置释放到本地，来让我们进行配置，但这种方式也会有缺陷，具体后面会详细说明，同时，社区也提供了一种方案，可以使用react-app-rewired包来重写webpack配置。接下来我们就详细来说明这两种方式，帮你一举扫清环境配置的各种障碍。

使用create-react-app初始化项目

  • 创建项目
npx create-react-app react-demo
  • 启动项目
cd react-demo
npm run start

至此，一个简单的react项目就创建和启动完毕了。

扒一扒create-react-app背后的东西

通过项目创建大概有小伙伴会说这比vue-cli创建vue项目简单，但是两个命令背后发生了什么应该也会有疑问，接下来我们就一点点扒开它的真实面目。

两个疑问

1、为什么使用npx创建项目？

在使用create-react-app创建项目时，通常是使用如下命令：

// 全局安装create-react-app
npm install create-react-app -g
// 使用create-react-app创建项目
create-react-app react-demo

但是我们这里为什么使用了 npx 就可以直接创建项目呢 ?
那就要从认识npx说起了。
npx是npm提供的一个命令，它可以不用全局安装包文件，就可以执行命令，在使用npx时它会先从下载一个临时包文件，等使用完成之后就会自动删除，以避免额外的占用磁盘空间。

2、执行npm run start后发生了什么？

相比很多的小伙伴大概也会跟我一样，对于执行一个命令就启动起来项目了，这背后到底发生了什么很好奇？那么现在我们就来一起一探究竟。

首先，查看项目根目录的package.json文件:

{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

查看package.json中的scripts配置，我们知道了，执行npm run start命令其实是执行了react-scripts start,那么react-scripts又是何方圣神呢？
其实npm执行的命令默认都会去项目的node_modules下面.bin目录下找可执行脚本。

其中react-scripts.cmd是windows系统下的可执行命令，react-script是linux环境下的命令。扒开文件内容我们可以看到：

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\react-scripts\bin\react-scripts.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\react-scripts\bin\react-scripts.js" %*
)

通过上面命令我们就知道了脚手架的webpack配置入口文件是react-scripts包中bin目录下的react-scripts.js文件。

react-scripts-package.png

然后在入口文件中又根据执行命令(参数)不同加载scripts目录下不同的文件。

entry.png

由入口文件可知，如果执行的是npm run start就会执行scripts/start.js文件。

webpack.config.png

在start.js文件中引入了config目录下webpack.config.js文件，那么这个文件就是项目脚手架中核心的webpack配置文件了。

扒到这里，大概大家就明白了，服务是如何启动的了，以及脚手架背后的webpack是如何配置的了。

那么，接下来我们就来说一说在日常项目中我们通常都怎样在脚手架的基础上自定义webpack配置的。

自定义webpack配置

通常，脚手架生成的默认配置是很难满足我们项目需要的，因此自定义配置项目的webpack是我们无法避免的。接下来我就介绍两种自定义webpack的方式。以及日常开发中常用到的配置。

一、使用eject，释放默认webpack配置

在package.json文件的scripts命令中，有一个npm run eject的命令，这个是create-react-app官方提供了一个可以释放默认webpack的命令。

执行npm run eject命令会将react-scripts释放到本地项目中，可以通过修改对应的文件完成配置。同时会删除react-scripts依赖包，修改package.json中命令。

eject.png

命令执行完毕以后，我们就会看到本地项目中多出了scripts和config两个目录文件。同时，package.json文件命令也被修改了。

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
}

此时，如果在执行启动或者打包命令，就是直接执行的scripts目录下对应的文件了。我们可以很方便的根据需要修改对应的文件配置即可。

但值得注意的是，npm run eject命令是不可逆的，即执行之后不可恢复，这就造成了如果后续我们想通过脚手架的react-scripts包增加新的特性，比如PWA支持，是不可行的，因此，请根据需要谨慎释放。

说完如何释放脚手架的webpack配置，接下来我们就来说一下如何通过释放默认配置的方式进行一些常用的自定义配置。

添加less支持

  • 安装less和less-loader
npm install less less-loader
  • 在config/webpack.config.js文件中做如下配置：

1、添加匹配.less和.module.less结尾的文件的正则

less-regex.png

2、在module的rules中配置less-loader规则

less-loader.png

至此，对less文件的支持已经配置好了，在项目中创建less样式文件并引入，就可以生效了。

  • 拓展

    看了上面的配置，可能有些人会有疑问：

    为什么要在配置中匹配.module.less文件，并进行单独的解析？

    这是因为在create-react-app创建的项目中，组件中的样式没有作用域隔离的概念，不像是vue中给style添加scoped属性，样式文件只针对当前组件有效，不会影响到子组件。所以在react项目中如果不进行处理很容易造成全局样式污染的问题。

    针对此，通常有两种解决方案：

    1、每个组件在最外层标签上都定义一个唯一的类名，所有的样式写在这个类下面。但是该方式当项目大了，参入人员多了就很难把控。

    2、定义组件样式文件为组件名.module.less的形式，并以模块的方式引入。

    style.module.png

解析到页面的时候就会给对应标签添加一个唯一标志的类名，这样就可以有效的避免样式污染问题。


style.page.png

按需引入 Antd 组件

antd组件是使用React技术栈使用最为普遍的 UI 组件库，如果使用css书写样式，那么按照官方文档配置使用即可：

antd-css.png

但是，如果我们使用less作为样式书写方式，使用上面的方式，antd的样式文件会不生效，如果将在App.less顶部引入的antd样式文件改为antd.less则会报错，因为在antd的dist目录下根本就找不到antd.less文件。

那么，我们就需要借助babel-plugin-import这个加插件了，使用这个插件在按需引入组件的时候会自动引入.js和.css|.less文件。

babel-import.png

接下来，就需要安装和配置babel-plugin-import了

  • 安装
npm install babel-plugin-import
  • 配置

在package.json文件中配置babel:

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [["import",{
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
    }]]
  }

或者在根目录创建.babelrl文件，配置：

// .babelrl
{
  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        // css
        // "style": "css"
        //less
        "style": true
      }]
    ]
}

以上两种配置babel的方式取一种即可。

另外需要提及一下的是，以上配置style取值不同，加载的样式文件类型也不一样。

babel-import-style.png

  • 踩坑

    配置style: true时，如果使用less和less-loader较高版本时会报错，在一番尝试后，将版本降级即可。我这里使用如下版本：

  "less": "2.7.3",
  "less-loader": "5.0.0",

当然，经过探索，使用高版本的less-loader也是可以的，但是less的版本要匹配，我这里使用了less-loader最新版本7.1.0,通过查看less-loader配置文件，发现依赖的less版本是3.5.0,因此我将less版本降为了对应版本。可光这样还是不够，还需要对webpack的less-loader进行对应的配置。

less-loader-config.png

自定义 Antd 主题

搞定上面的less-loader配置以后，自定义主题就非常容易了。antd组件样式是使用less开发的，我们只需要使用less提供的 modifyVars 的方式进行覆盖变量即可。

less-loader-theme.png

配置跨域

跨域是前后端分离的开发方式绕不过去的问题，因此也是我们进行项目开发时首先要考虑的，React开发的跨域配置有别于Vue，下面我们就来详细的看看。
通过阅读create-react-app官方文档可知，有两种方式可以配置跨域：

1、在package.json中，proxy字段进行配置：

"proxy": "http://192.168.0.0/api"

这时，如果访问后端接口本地的localhost就会被代理到http://192.168.0.0/api上。

但是，这种方式存在一个缺陷，如果你想同时访问多台服务器这种方式就没办法满足了，类似如下配置：

// 伪代码
"proxy": {
    "/api": {
        "target": "http://192.168.0.0",
    },
    "/abc": {
        "target": "http://192.168.0.1",
    }
}

此时，启动就会报错，提示proxy字段只接收字符串，不接受对象。

2、针对第一种的缺陷，官方比较推荐使用 http-proxy-middleware插件的方式

proxy.png

具体使用如下：

  • 安装http-proxy-middleware 
yarn add http-proxy-middleware
  • 在项目的src目录下创建setupProxy.js,并进行配置
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://172.16.0.0:8082',
            changeOrigin: true,
        })
    ),
    app.use(
        '/abc',
        createProxyMiddleware({
            target: 'http://172.16.0.1:8082',
            changeOrigin: true,
        })
    ),
}

然后重启项目，就可以了。

设置路径别名

在config目录下找到webpack.config.js文件，做如下配置即可：

alias.png

关闭生产环境 sourcemap

通常在开发的时候，我们会配置开发环境生成 sourcemap 文件，方便调试，但是在生产环境都要关闭，避免代码泄露和打包多余文件，体积太大。通过查看config/webpack.config.js文件的devtool配置如下：

sourcemap.png

因此，可以通过cross-env插件在打包命令中添加全局变量。

  • 安装cross-env 
yarn add cross-env
  • 在打包命令中配置
"scripts": {
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js",
  },

打包开启 gzip 压缩

前端代码打包开启gzip压缩是前端性能优化重要的策略之一，因此这里也说下eject后如何配置打包开启gzip压缩。开启打包代码压缩需要使用到插件compression-webpack-plugin。

  • 安装
yarn add compression-webpack-plugin
  • 配置

在config/webpack.config.js文件下做如下配置：

const CompressionPlugin = require("compression-webpack-plugin");
// 在命令中添加一个GENERATE_GZIP环境变量控制是否开启打包压缩
const isGzip = process.env.GENERATE_GZIP === "true";
plugins: [
  // ...
  isEnvProduction &&
    isGzip &&
    new CompressionPlugin({
      // 匹配开启gzip压缩的文件
      test: /\.(js|css|html|png|jpg)$/,
      // 压缩后静态资源文件名
      filename: "[path][base].gz",
      // 使用的压缩算法
      algorithm: "gzip",
      // 只处理10M以上的资源压缩
      threshold: 10240,
      // 只处理压缩率小于0.8的资源
      minRatio: 0.8,
      // 压缩后是否删除源文件
      deleteOriginalAssets: true,
    }),
];
  • 在命令脚本设置是否开启压缩打包变量
"scripts": {
    "test": "cross-env GENERATE_GZIP=true node scripts/build.js",
    "prod": "cross-env GENERATE_GZIP=true node scripts/build.js"
  },

配置全局环境变量

在create-react-app官方文档中提供了通过.env文件来配置全局环境变量的方式，但是只提供了开发环境和生产环境两种，但是我们日常开发中，必定会有测试环境，甚至是体验环境，因此仅仅使用官方提供的无法满足我们的需求，因此需要做些小的修改。

需求：

打包后的文件名通过.env.xx环境变量REACT_APP_MODE来决定。

步骤：

  1. 在项目根目录创建三个文件：.env、.env.test、.env.prod。内容如下:
// .env 开发环境环境变量
NODE_ENV = development;
REACT_APP_MODE = dev;
// .env.test 测试环境环境变量
NODE_ENV = production;
REACT_APP_MODE = test;
// .env.prod 生产环境环境变量
NODE_ENV = production;
REACT_APP_MODE = prod;
  1. 修改package.json文件命令脚本
"scripts": {
    "start": "node scripts/start.js",
    "test": "cross-env MODE_ENV=test node scripts/build.js",
    "prod": "cross-env MODE_ENV=prod node scripts/build.js"
  },

  1. 修改 config/env.js 文件


    mode_env.png
  1. 修改config/paths.js文件
    fileName.png

几点说明

  • 在命令脚本设置环境变量使用了cross-env插件，因此需要先安装。
  • 在命令脚本加入MODE_ENV环境变量是为了根据命令加载不同的.env.xx环境变量文件。
  • .env.xx配置的环境变量必须以REACT_APP_xx开头。
  • 在.env.xx配置的环境变量在全局范围内通过process.env.变量名获取到。

二、不使用eject，重写项目默认webpack配置

相比于eject释放配置后，需要进行复杂的webpack配置不同，不使用eject则简单很多，添加less支持、Antd组件按需引入、自定义主题、跨域配置、设置路径别名、打包开启 gzip 压缩、生产环境关闭 sourceMap等都可以通过插件react-app-rewired、customize-cra在一个配置文件内完成，同时还支持自定义扩展，根据需求配置（添加或修改）webpack的plugins和loader。具体操作如下:

安装依赖

yarn add react-app-rewired customize-cra babel-plugin-import less less-loader antd

修改package.json命令配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build"
}

在项目根目录创建config-overrides.js文件，并进行如下配置：

const {
  override,
  overrideDevServer,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias,
} = require("customize-cra");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
const devServerConfig = () => (config) => {
  return {
    ...config,
    // 跨域配置
    proxy: {
      "/api": {
        target: "http://172.16.15.50:8082/api",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
      "/abc": {
        target: "http://172.16.0.1:9003",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/abc": "",
        },
      },
    },
  };
};
// 自定义插件配置
const selfPlugins = [
  new CompressionPlugin({
    // 匹配开启gzip压缩的文件
    test: /\.(js|css|html|png|jpg)$/,
    // 压缩后静态资源文件名
    filename: "[path][base].gz",
    // 使用的压缩算法
    algorithm: "gzip",
    // 只处理10M以上的资源压缩
    threshold: 10240,
    // 只处理压缩率小于0.8的资源
    minRatio: 0.8,
    // 压缩后是否删除源文件
    deleteOriginalAssets: true,
  }),
  // 更多自定义插件配置.....
];
module.exports = {
  // webpack配置
  webpack: override(
    // 按需引入antd组件
    fixBabelImports("import", {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true,
    }),
    // 添加less支持和自定义主题
    addLessLoader({
      lessOptions: {
        modifyVars: { "@primary-color": "#1DA57A" },
        javascriptEnabled: true,
      },
    }),
    // 设置路径别名
    addWebpackAlias({
      "@": path.resolve(__dirname, "./src"),
    }),
    /**暴露webpack的配置
     * 当插件内置方法不足以满足我们的要求时，可以接收一个函数来暴露webpack所有配置，
     * 进行添加或修改loader，plugins，如此就可以满足所有的需求了
     */
    (config) => {
      console.log("config", config);
      // 开发环境开启source map，生产环境去掉map文件
      config.devtool =
        config.mode === "development" ? "cheap-module-source-map" : false;
      /**
       * 添加或修改plugins配置
       */
      if (process.env.NODE_ENV === "production") {
        // 生产环境开启gzip压缩
        config.plugins = [...config.plugins, ...selfPlugins];
      }
      /**
       * 添加和修改loader配置
       */
      // 获取所有的loader信息：
      let loaders = config.module.rules.find((rule) =>
        Array.isArray(rule.oneOf)
      ).oneOf;
      // 获取到所有的loader之后，根据需求添加或修改具体的某一项loader.....
      return config;
    }
  ),
  // 本地服务devServer配置
  devServer: overrideDevServer(devServerConfig()),
};

几点说明：

  1. 添加less支持会根据less和less-loader版本不同会有所差异，我这里使用的版本是："less": "3.5.0"、"less-loader": "^7.1.0"。
  2. 这种配置less支持的方式，不管是直接使用.less文件书写样式，还是通过.module.less文件的方式都可以支持。
  3. 跨域代理配置这并不是唯一的方法，也可以使用前面介绍到的http-proxy-middleware插件。
  4. 使用compression-webpack-plugin开启gzip压缩时，如果使用最新版本打包时会报错，版本降为6.0.0后正常。
    gzip-error.png
  1. 这种方式，除了使用插件内置的方法配置外，还支持自定义扩展配置，通过暴露webpack的配置来完成自定义添加或修改plugins和loader，这样就可以最大限度来满足项目的多样化需求了。

环境变量配置差异

相较于释放webpack配置配置环境变量，重写webpack配置设置环境变量则有所不同，我们无法在config-overrides.js中配置根据环境引入不同的.env.xx文件。因此只能借助工具来完成，通过dotenv插件我们可以在命令脚本配置引入哪个.env.xx文件。我们用同样的需求演示。

需求:

打包后的文件名通过.env.xx环境变量REACT_APP_MODE来决定。

步骤:

  • 安装dotenv-cli 
yarn add dotenv-cli
  • 在项目根目录下创建.env、.env.test、.env.prod文件，并进行如下配置：
// .env 开发环境环境变量
REACT_APP_MODE = dev;
// .env.test 测试环境环境变量
REACT_APP_MODE = test;
// .env.prod 生产环境环境变量
REACT_APP_MODE = prod;
  • 修改package.json文件命令脚本
"scripts": {
    "start": "react-app-rewired start",
    "test": "dotenv -e .env.test react-app-rewired build",
    "prod": "dotenv -e .env.prod react-app-rewired build"
}
  • 在config-overrides.js中修改默认打包后的文件名
    override_path.png

完整配置文件

const {
  override,
  overrideDevServer,
  fixBabelImports,
  addLessLoader,
  addWebpackAlias,
} = require("customize-cra");
const path = require("path");
const CompressionPlugin = require("compression-webpack-plugin");
const devServerConfig = () => (config) => {
  return {
    ...config,
    // 跨域配置
    proxy: {
      "/api": {
        target: "http://172.16.15.50:8082/api",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
      "/abc": {
        target: "http://172.16.0.1:9003",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/abc": "",
        },
      },
    },
  };
};
// 自定义插件配置
const selfPlugins = [
  new CompressionPlugin({
    // 匹配开启gzip压缩的文件
    test: /\.(js|css|html|png|jpg)$/,
    // 压缩后静态资源文件名
    filename: "[path][base].gz",
    // 使用的压缩算法
    algorithm: "gzip",
    // 只处理10M以上的资源压缩
    threshold: 10240,
    // 只处理压缩率小于0.8的资源
    minRatio: 0.8,
    // 压缩后是否删除源文件
    deleteOriginalAssets: true,
  }),
  // 更多自定义插件配置.....
];
module.exports = {
  /**
   * 路径信息配置
   *  要修改什么路径，打印出来paths，更改对应的位置即可
   */
  paths: function (paths) {
    // 打包后的文件名
    paths.appBuild = path.join(__dirname, `./${process.env.REACT_APP_MODE}`);
    console.log(paths);
    return paths;
  },
  // webpack配置
  webpack: override(
    // 按需引入antd组件
    fixBabelImports("import", {
      libraryName: "antd",
      libraryDirectory: "es",
      style: true,
    }),
    // 添加less支持和自定义主题
    addLessLoader({
      lessOptions: {
        modifyVars: { "@primary-color": "#1DA57A" },
        javascriptEnabled: true,
      },
    }),
    // 设置路径别名
    addWebpackAlias({
      "@": path.resolve(__dirname, "./src"),
    }),
    /**暴露webpack的配置
     * 当插件内置方法不足以满足我们的要求时，可以接收一个函数来暴露webpack所有配置，
     * 进行添加或修改loader，plugins，如此就可以满足所有的需求了
     */
    (config) => {
      // console.log('config', config)
      // 开发环境开启source map，生产环境去掉map文件
      config.devtool =
        config.mode === "development" ? "cheap-module-source-map" : false;
      /**
       * 添加或修改plugins配置
       */
      if (process.env.NODE_ENV === "production") {
        // 生产环境开启gzip压缩
        config.plugins = [...config.plugins, ...selfPlugins];
      }
      /**
       * 添加和修改loader配置
       */
      // 获取所有的loader信息，
      let loaders = config.module.rules.find((rule) =>
        Array.isArray(rule.oneOf)
      ).oneOf;
      // 获取到所有的loader之后，根据需求添加或修改具体的某一项loader.....
      return config;
    }
  ),
  // 本地服务devServer配置
  devServer: overrideDevServer(devServerConfig()),
};

至此，项目开发中的常用配置就已经分享完了，搭建好环境后就可以愉快的撸码了。

码字不易，且行且珍惜！！！！

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容