react + webpack 多页面搭建

一、利用 creat-react-app 新建一个react单页面应用。

cnpm i -g create-react-app

create-react-app demo

cd demo

npm start

可以看到下面页面

三、修改index.js内容为：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';

class Login extends React.Component{

    constructor() {
        super();
        this.state = {
        }
    }
    componentDidMount(){

    }

    render() {
        return (
            <div className="login">
                22
              </div>
        )
    }
}

ReactDOM.render(
    <Login/>,
    document.getElementById('app')
);

四、删除src下面的registerServiceWorker.js（该文件用于构建pwa应用用的，暂时我们用不了）和 logo.svg文件（不想处理图片文件）和 App.test.js(用于测试用的)。

扫描二维码关注公众号，回复： 7302376 查看本文章

现在src/下面有四个文件。接下来，在src下面新建自己需要的文件夹，分别将原来的四个文件拷贝进文件夹内。文件目录如下：

五、修改public/index.html内容为：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

六、开始install webpack和配置webpack

1.安装依赖。将package.json文件用下面的文件替代

{
  "name": "demo",
  "version": "0.1.0",
  "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" }, "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "clean-webpack-plugin": "^0.1.16", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.0.0", "glob": "^7.1.2", "html-webpack-plugin": "^2.30.1", "postcss-loader": "^2.0.6", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "webpack": "^3.5.6", "webpack-dev-server": "^2.8.1" }, "scripts": { "start": "webpack-dev-server --open", "build": "webpack" } }

2.删除当前目录中的node_modules，然后重新在控制台执行

npm i

3.在根目录下也就是／demo下新建一个webpack.config.js文件,写入如下代码

const webpack = require('webpack');
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let cssExtract = new ExtractTextPlugin('assets/css/reset.css');
let sassExtract = new ExtractTextPlugin('assets/css/[name].[chunkhash:6].css');

const env=process.argv[2];

let dnsPath='';
if(env==='pro'){
    dnsPath=''
}else if(env==='stg'){
    dnsPath=''
}else{//本地
    dnsPath='/finance/scan-to-pay'
}

const webpackConfig = {
  entry: {},
  output:{
    path:path.resolve(__dirname, 'dist'),
    filename:'assets/js/[name].[chunkhash:6].js',
    publicPath: '/'
  },
  devServer: {
    host: "172.16.10.70",
    inline: true,
    port: 8181,
    // proxy: {
    //   '/financegateway': {
    //     target: '',
    //     changeOrigin: true
    //   }
    // }
    proxy: [{
      context: ['/financegateway', '/uploadimage', '/pointgate'],
      target: '',
      changeOrigin: true
    }]
  },
  module:{
    rules:[
      {
        test:/\.js?$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        query:{
          presets:['@babel/preset-env','@babel/preset-react']
        }
      },
      {
        test: /\.css$/,
        use: cssExtract.extract({
          use: ['css-loader', 'postcss-loader']
        })
      },
      {
        test: /\.scss$/, 
        loader: sassExtract.extract({
          use: ['css-loader', 'postcss-loader', 'sass-loader']
        })
      },
      // {
      //   test: /\.(png|jpg|jpeg|gif)$/,
      //   use: [
      //     {
      //       loader: 'url-loader?limit=8192&name=assets/imgs/[name][hash:6].[ext]'
      //     }
      //   ]
      // }
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name() {
                return 'assets/imgs/[hash:6].[ext]'
              },
              publicPath: '/'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    cssExtract,
    sassExtract,
    new CleanWebpackPlugin(
      ['dist'],　 
      {
        root: __dirname,    　　　　　　　　　　
        verbose: true,    　　　　　　　　　　
        dry:   false    　　　　　　　　　　
      }
    )
  ],
};

// 获取指定路径下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
   entries = {};
  files.forEach((filepath)=> {
    const path = filepath.replace(/\/index.js/, ''); // 获取文件路径
    let name = path.replace(/src\//, ''); // 文件路径去除src目录
    entries[name] = './' + filepath;
  });
  return entries;
}
    
const entries = getEntries('src/**/index.js');

// 循环入口文件
Object.keys(entries).forEach((name)=> {
    webpackConfig.entry[name] = entries[name];

    const plugin = new HtmlWebpackPlugin({
      filename: `${name}/index.html`,
      template: `src/${name}/index.html`,
      inject: true,
      chunks: [name]
    });
    webpackConfig.plugins.push(plugin);
  
})

module.exports = webpackConfig;

4.postcss.config.js

module.exports = {
    plugins: [require('autoprefixer')({
        overrideBrowserslist: ["last 5 versions"] // 所有浏览器兼容到最后5个版本
    })]
}

react + webpack 多页面搭建

开始install webpack和配置webpack

猜你喜欢