webpack 配置react开发环境

创建项目

1. 创建项目文件夹，并使用npm init生成初始package.json

mkdir project 
cd project
npm init -y

2. 创建完成后，创建项目目录结构

├── config  # webpack配置
       ├── webpack.base.js # 公共配置
       ├── webpack.dev.config.js # 开发环境配置
       └── webpack.prod.config.js # 打包发布环境配置
├── example # 开发时预览代码
       ├── src # 示例代码目录
               ├── app.js # 入口 js 文件
               └── index.html # 入口 html 文件
├── lib # 组件打包结果目录
├── node_modules # 安装依赖时自动生成
├── src # 组件源代码目录
       ├── index.less# 组件样式
       └── index.js  # 组件源代码
├── .babelrc # babel 配置
├── .npmignore # 需要忽略的文件和文件夹
├── README.md
└── package.json

安装依赖

3. 安装webpack以及cli

npm i webpack webpack-cli webpack-dev-server webpack-merge -D

4. 安装react 相关

npm i react react-dom -D

5. 安装babel编译依赖

npm i @babel/cli @babel/core @babel/preset-env @babel/preset-react -D

6. 安装babel-loader(编译jsx)以及MiniCssExtractPlugin(提取css)

npm i babel-loader mini-css-extract-plugin -D

7. 安装css-loader,style-loader,该项目采用Less，因此需要安装less-loader

npm i css-loader style-loader less less-loader -D

8. 执行完成后package.json如下图

   
   image

tip：如报错：Error: Cannot find module 'webpack-cli/bin/config-yargs'
将webpack-cli版本替换为3.3.12

配置webpack以及babel

9. 在config文件夹下创建三个文件

• webpack.base.js
• webpack.dev.config.js
• webpack.prod.config.js

10. 公共部分的webpack配置放在webpack.base.js文件中，利用webpack-merge进行合并

module.exports ={
   module:{
       rules:[
           {
               test:/\.(js|jsx)$/i,
               use: {
                   loader:'babel-loader',
               },
               include: /src/,
           }
       ]
   }
}

11. 开发时的webpack配置文件为webpack.dev.config.js

const path = require('path');
const {merge} = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const devConfig = {
  mode: 'development',
  entry: path.join(__dirname, '../example/src/app.js'),
  output: {
      path: path.join(__dirname, '../example/src'),
      filename: "bundle.js"
  },
  module: {
      rules: [
          {
              test: /\.less$/i,
              exclude: /\node_modules/,
              use: [
                  {
                      loader: "style-loader"
                  },
                  {
                      loader: 'css-loader?modules',

                  },
                  {
                      loader: "less-loader",

                  }
              ]
          },
          {
              test: /\.css$/i,
              use: ['style-loader', 'css-loader']
          },
          {
              test: /\.min.css$/i,
              use: ['style-loader', "css-loader"]
          }
      ]
  },
  devServer: {
      contentBase: path.join(__dirname, '../example/src/'),
      compress: true,
      host: '127.0.0.1',
      port: 3000,
      open: true
  },
}

module.exports = merge(devConfig, baseConfig)

12. 打包时采用的webpack配置文件为webpack.prod.config.js

const path = require('path');
const baseConfig = require('./webpack.base.js');
const {merge} = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const prodConfig = {
    mode: 'production',
    entry: path.join(__dirname, '../src/index.js'),
    output: {
        path: path.join(__dirname, '../lib/'),
        filename: 'index.js',
        libraryTarget: 'umd',
        libraryExport: 'default'
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                exclude: /\node_modules/,
                use : [
                    MiniCssExtractPlugin.loader,
                    { loader: "css-loader?modules" },
                    { loader: "less-loader" }
                ]

            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'index.css'
        })
    ],
    externals: {
        react: {
            root: 'React',
            commonjs: 'react',
            commonjs2: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDom',
            commonjs: 'react-dom',
            commonjs2: 'react-dom',
            amd: 'react-dom'
        }
    }

}

module.exports = merge(prodConfig, baseConfig)

13. 编写完成配置文件后，需要在package.json中配置开发和打包命令

  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --config config/webpack.dev.config.js",
  "build": "webpack --config config/webpack.prod.config.js",
  "publish": "npm run build && npm run publish"

配置babel

14. 使用babel将es6+代码编译为es5版本，在.babelrc文件中加入

{
"presets": [
  "@babel/preset-env",
  "@babel/preset-react"
  ]
}

15. 以上，则完成了脚手架的搭建。

开发Demo

16. 在src/index.js中输入

import React from 'react';
import styles from './index.less';
class ReactDemo extends React.Component{
render () {
return ' hello world'
}
}
export default ReactDemo;

17. 在样式文件index.less中加入

.wrapper{ background: red; }

18. 为了进行预览，则在example中加入index.html以及app.js

// index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>

</html>


// app.js
import React from 'react'
import { render } from 'react-dom'
import Index from '../../src'

const App = () =>
  <Index />
render(<App />, document.querySelector('#root'))

此处index.html中引入bundle.js,原因是因为在开发过程中(webpack-dev-server)不会实际生成bundle.js，打包好的文件是在内存中，如需实时预览，需在html中引入，或使用html-webpack-plugin注入，如需详细了解请参照 webpack官方文档

19. 最后执行npm run start 命令 如出现下图及浏览器打开3000端口则表示成功

    
    image

20. 浏览器出现页面

    
    image

到这里，一个基于webpack,react以及less的项目就搭建成功，如需配置react相关环境，请关注后续文章