express制作小型热加载打包webpack--react篇

node 服务器的main.js文件

var opn = require('opn') // 打开浏览器
var path = require('path') // 路径模块
var express = require('express') // express框架 
var webpack = require('webpack') //核心模块webpack

var webpackConfig = require('./webpack.config')// 配置文件


var port = webpackConfig.devServer.port


var app = express()
var compiler = webpack(webpackConfig)

var devMiddleware = require('webpack-dev-middleware')(compiler, {
     
  publicPath: webpackConfig.output.publicPath,
//   quiet: true
})

var hotMiddleware = require('webpack-hot-middleware')(compiler, {
     
  log: false,
  heartbeat: 2000
})

app.use(require('connect-history-api-fallback')()) 
//开启 支持history路由


app.use(devMiddleware) // 服务器webpack插件


app.use(hotMiddleware) // 热加载自动打包


app.use('./static', express.static('./static'))

var uri = 'http://localhost:' + port

var _resolve
var readyPromise = new Promise(resolve => {
     
  _resolve = resolve
})

console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
     
  console.log('> Listening at ' + uri + '\n')
  
  if (process.env.NODE_ENV !== 'testing') {
     
    opn(uri)
  }
  _resolve()
})

var server = app.listen(port)

module.exports = {
     
  ready: readyPromise,
  close: () => {
     
    server.close()
  }
}

webpack配置文件

const path=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
// const vueload=require("vue-loader/lib/plugin")
const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件
const optimizecssassetswebpackplugin=require("optimize-css-assets-webpack-plugin")//压缩如果你使用ui组件库已经压缩的css就别必要了
const webpack = require("webpack")
const clernWebpackPlugin = require('clean-webpack-plugin')
const htmlplugin=new HtmlWebpackPlugin({
     
    template:path.join(__dirname,'./src/index.html'),//源头文件
    filename:"index.html",//生成首页的文件名称
    minify: {
     
        removeAttributeQuotes: true,
        collapseWhitespace: true
    }
})
const css=new minicss({
     //输出css独立文件
    filename:"./css/[name].css",
    chunkFilename:"[name].css"//或者id
})
module.exports={
     //webpack基于node构建的
    mode: "development", 
    entry: ['webpack-hot-middleware/client', './src/index.js'],  
    output: {
     
        filename: 'main.[hash:8].js',//通过热加载输出script文件挂载在目录与index.HTML一样
        path: path.resolve(__dirname, 'dist')
    },
    watch: true,
    watchOptions:{
     
        poll:1000,
        // aggregateTimeOut: 500,
        ignored: /node_modules/
    },
    //production 提供了约定大于配置 约定打包文件是src/index ->dist/main
    plugins:[
        htmlplugin,
    //    new vueload() ,
       css,
       new webpack.HotModuleReplacementPlugin()
    //    new clernWebpackPlugin('./dist')
     ],
    module: {
     //所以第三方模块的配置规则
        rules: [   
           
            {
     
                test: /\.js|.jsx$/,
                loader: 'babel-loader',
                exclude:/node_modules/
              },
              {
     
                test: /\.scss$/,
               
                
                use:[{
     loader:minicss.loader}, {
     
                    loader: 'css-loader',
                    options: {
      modules: true }
                  },'sass-loader']
              },
              {
     
                test: /\.tsx$/,
                loader: 'ts-loader',
                options: {
      appendTsSuffixTo: [/\.vue$/] },
                exclude:/node_modules/
              },
              {
     
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
     
                  limit: 10000
                  
                }
              },
            // { test:/\.js|\jsx$/,use:[{loader:"babel-loader",options:{cacheDirectory:true}}],exclude:/node_modules/},//一个属性use:"babel-loader"两个是数组
            // // { test:/\.css/,use:['style-loader','css-loader']},
            {
     test:/\.css$/,use:[{
     loader:minicss.loader},'css-loader']},
         //     { test:/\.scss/,use:['style-loader',  {loader: "css-loader",
         //     options: {//这个是react的css模块化
         //        modules: {
     
         //            localIdentName: "[path][name]-[local]-[hash:5]"
         //        }//import css from '路径' console.log(css)会生成模块
         //        //这是react的处理办法 vue就是style里面写scoped
         //        //支持id与class 控制台输出的模块是健对值形式
         //     }//css scss less一样的配置模块化
         //    }]},
             {
      test:/\.(jpg|PNG|png|jpeg)/,use:[{
     loader:"url-loader",options:{
     
                 outputPath:"images/",
                 limit:1024,//单位是B 大于这个会打包出来
                 name:"[name].[ext]"
             }}]},                    
            //    { test:/.vue$/,use:[{loader:"vue-loader"}]},
               
           ]   
        },
        devtool:"source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离 
        // optimization:{//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
        //     splitChunks:{
     
        //         chunks:"all"
        //     }
        // },
        resolve: {
     
            // 将 `.ts` 添加为一个可解析的扩展名。
            extensions: ['.js','.jsx','.tsx','.json']
        },
        devServer: {
     
            port: 8080,
            hot: true,
            grogress: true,
            historyApiFallback: true 
            //true 表示webpack支持使用history false路由默认是hash
        }   
}

运行的index.js文件

import React from 'react'//创建组件虚拟dom 生命周期
import ReactDOM from 'react-dom'//把创建的组件虚拟dom放到页面上展示的
import Router from './router/router'
import {
     store} from './redux/redux' // 只有index才默认选中 
import {
     Provider} from '../node_modules/react-redux'
//import 'react-hot-loader'; 没有报错可以注释
import {
      hot } from 'react-hot-loader/root';
const App = () => <div>Hello World1!
        <Provider store={
     store}>
            <Router />,
        </Provider>,
</div>;
const Wpp = hot(App)
ReactDOM.render(
    <Wpp/>,
    document.getElementById("app")
)

babelrc

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