最新webpack+ES6+React环境配置

1、新建并初始化项目

mkdir react-demo && cd react-demo
npm init -y

2、安装全局 webpack、webpack-cli 和 局部 webpack、 webpack-cli

npm install webpack webpack-cli -g
npm install webpack webpack-cli --save-dev

3、项目根目录新建 webpack.config.js 文件

const path = require('path');
module.exports = {
  entry: './src/main.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

4、安装并配置 html-webpack-plugin 插件

npm install html-webpack-plugin --save-dev

webpack.config.js文件：

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

plugins: [
	new HtmlWebpackPlugin()
]

5、安装并配置 babel-loader

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

webpack.config.js文件：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

6、 react 安装配置

npm install react react-dom --save

src/main.jsx文件：

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

class App extends React.Component {
  render () {
    return (
      <div>
        <h1>This is a test</h1>
        <p>The paragraph is a React test.</p>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.body)

7、sass环境配置

npm install style-loader css-loader node-sass sass-loader --save-dev

webpack.config.js文件：

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

8、编译项目

package.json文件：

"scripts": {
  "build": "webpack"
}

然后命令行输入：

npm run build

会自动生成 dist目录以及相应的文件。

9、安装 webpack-dev-server ，实时刷新网页

npm install webpack-dev-server --save-dev

webpack.config.js文件：

devServer: {
  contentBase: './dist'
}

package.json文件：

"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server --open"
}