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(
Hello world
,
document.getElementById("app")
);

执行终端

• 5、使用html-webpack-plugin对html打包。安装依赖：
  npm i html-webapck-plugin html-load --save-dev
  新建./src/index.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内容，就可以看到你修改的内容