{
  "name": "reactdemotonpm", // 项目名称
  "version": "1.0.0",  // 版本
  "description": "", // 项目描述
  "main": "index.js", // 项目入口
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "", // 作者
  "license": "ISC", // 开源许可证
}

npm install -D webpack webpack-cli webpack-dev-server webpack-merge cross-env

// webpack-merge 用来把开发和生产的配置分开
// cross-env 用来把开发和生产环境

npm install -D babel-loader @babel/core @babel/preset-env react react-dom 

并且新建.babelrc 文件,并输入
{
    "presets": [
        "@babel/react",
        "@babel/env"
    ]
}

npm install -D css-loader style-loader react-hot-loader

npm install -D html-webpack-plugin uglifyjs-webpack-plugin clean-webpack-plugin

新建文件夹src，然后新建一个index.js文件，输入
import React from 'react';
import './styles.css'
class Hello extends React.Component{
  render () {
    return (
      <h1>Hello world</h1>
    );
  }

}
export default Hello;
======================

index.js文件同目录下新建styles.css，输入
h1 {
    color: red;
}
======================

index.js文件同目录下新建indexBuild.js，输入
import Hello from './Hello';
export default Hello;
======================

index.js文件同目录下新建indexStart.js，输入
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import { AppContainer } from 'react-hot-loader'; 

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('app')
  )
}

render(Hello)
// Webpack Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./Hello', () => {
    const NextApp = require('./Hello').default
    render(NextApp);
  })
}
======================

在根目录新建文件 webpack.commom.js  webapck.dev.js webpack.prod.js

// webpack.commom.js 
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const env = process.env.NODE_ENV;

// 开发环境的plugins
const pluginsDev = [
  new CleanWebpackPlugin(),
  new HtmlWebpackPlugin({
    title: 'Output Management',
    template: 'index.html'
  }),
  // 热模块更新
  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin(),
]

// 生产环境的plugins
const pluginsProd = [
  new CleanWebpackPlugin(),
  new UglifyJSPlugin(),
]

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "index.js",
    // libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader' 
      },
      {
        test: /\.css$/, 
        use: [
          'style-loader',
          'css-loader',
        ]
      },
    ]
  },
  plugins: env === 'production' ? pluginsProd : pluginsDev,
}
======================

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

module.exports = merge(common, {
  entry: {
    app: [
      'webpack-dev-server/client?path=http://localhost:8989/__webpack_hmr',
      'webpack/hot/only-dev-server',
      path.resolve(__dirname, 'src/indexStart.js'),
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    port: 8989,
    hot: true,
  }
});
======================

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

module.exports = merge(common, {
  entry: {
    app: [
      path.resolve(__dirname, 'src/indexBuild.js'),
    ]
  },
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: "index.js",
    // npm常用的js格式
    libraryTarget: 'commonjs2'
  },
});

"name": "reactdemotonpm01",
 "version": "1.0.0",
 "description": "",
 "main": "lib/index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "start": "cross-env NODE_ENV=development webpack-dev-server --hotOnly --config webpack.dev.js",
   "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js"
 },
 "author": "",
 "license": "ISC",
 
 
 将对象main设置为lib/index.js意味着发布npm模块之后，会默认在lib/index.js下面查找我们发布的react模块

首先打包npm run build 

执行npm link 之后，会输出以下内容，这个时候表示已经把reactdemotonpm这个模块，发布到你本机的node模块中。

/Users/xingexiaer/.nvm/versions/node/v9.6.0/lib/node_modules/reactdemotonpm -> /Users/xingexiaer/Desktop/SetcinaProjectDemo/reactDemoToNpm