webpack 4 + reactjs

前提

首先保证node版本大于4.0
构建一个空目录

无webpack.config.js打包

webpack4.x项目是以根目录下的'./src/index.js'作为入口

1、快速构建项目
npm init -y
2、安装webpack
npm i webpack webpack-cli --save-dev
3、package.json 更改为

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

4 创建./src/index.js文件，增加内容

console.log('一切从这里开始')

在终端执行npm run build,目录下就会多了一个dist文件件，这就是webpack打包的结果

5 修改package.json文件的scripts

 "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },

分别执行两个操作，你会发现main.js不同的变化。production模式下，默认对打包的文件压缩，打包更小。production模式下，对打包的文件不压缩，同时打包的速度更快，webpack更新的优点就在这里。
如果没有指定任何模式，默认为production模式。

安装依赖

1、安装依赖包
npm i babel-core babel-loader babel-preset-env react react-dom babel-preset-react --save-dev
2、新建babelrc文件，进行相关配置

{
  "presets": ["env","react"],
}

3、新建webpack.config.js文件，进行配置

module.exports = {
  module: {
   rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
      loader: "babel-loader"
    }
  }
]
  }
};

4、修改index.js

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

ReactDOM.render(
<div>Hello world</div>,
document.getElementById("app")
);

执行终端

5、使用html-webpack-plugin对html打包。安装依赖：
npm i html-webapck-plugin html-load --save-dev
新建./src/index.html文件

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webpack4入门</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

修改webpack.config.js配置

const path = require('path')
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

执行命令行，可以在dist看到html文件

6、webpack-dev-server插件
npm i webpack-dev-server --save-dev
修改package.json和webpack.config.js文件

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

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports ={
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.html$/,
                use:[{
                    loader:'html-loader',
                    options:{minimize:true}
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html',
            filename:'./index.html'
        }),
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        compress:true,
        port:8033,
        host:'127.0.0.1',
    }
};

7、react-hot-loader插件
npm i react-hot-loader --save-dev
修改.babelrc和webpack.config.js文件

{
  "presets": ["env","react"],
  "plugins": ["react-hot-loader/babel"]
}

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');
module.exports ={
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader'
                }
            },
            {
                test:/\.html$/,
                use:[{
                    loader:'html-loader',
                    options:{minimize:true}
                }]
            }
        ]
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html',
            filename:'./index.html'
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:path.join(__dirname,"dist"),
        compress:true,
        port:8033,
        host:'127.0.0.1',
        hot:true
    }
};

执行终端，npm run start便可以启动webpack-dev-server，修改app.js内容，就可以看到你修改的内容

webpack 4 + reactjs

前提

无webpack.config.js打包

安装依赖

推荐阅读更多精彩内容