2.3.19 • Published 4 years ago

quick-react-webpack v2.3.19

Weekly downloads
6
License
MIT
Repository
-
Last release
4 years ago

quick-react-webpack

quick webpack for react(modify from new version create-react-app:eject for better custom for business)

install&&cli

npm i quick-react-webpack -D

//in package.json
{
  "scripts":{
    "dev":"qr development",
    "build":"qr production"
  }
}

//before npm run dev/build,need config appConfig.js in current directory

//and also can use script to run
{
  "dev": "node ./env/dev.js",
  "build": "node ./env/prod.js",
}

//in ./env/dev.js
 require('quick-react-wepback').development();
 //in ./env/prod.js
 require('quick-react-wepback').production();

example

//package.json
 "scripts": {
    "start": "qr development",
    "build": "qr production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
 "dependencies": {
    "@hot-loader/react-dom": "^16.9.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "quick-react-webpack": "^2.2.3"
  }

//./src/main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<div><App/></div>, document.getElementById('root'));

//./src/App.js
import React from 'react';
import { hot } from 'react-hot-loader';
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>App</div>;
  }
}
if (
  process.env.NODE_ENV === 'development' &&
  [true, 'true'].indexOf(process.env.HOT) !== -1
) {
  App = hot(module)(App);
}
export default App;


// ./appConfig.js
module.exports = {
  // analyze:true,
  port: 3000,
  entryIndex: './src/main.js',
  buildDir: './dist',
  appHtml: './src/index.html',
  hot: true
};

//./src/index.html
/*
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='root'></div>
</body>
</html>
*/

appConfig.js

default appConfig.js position is in current project root directory.This config support scss,less,svg,less,json,xml,ts,js file type default.write tsconfig.json in root directory if use ts project

basic config

module.exports={

port: 3000,

entryIndex: './src/main.js', //root js file,or object:{},or array:[]

appHtml: './src/index.html', //html position,or entry which follow by entryIndex,or [] by custom define

useTypescript:true/false,//default false

htmlDir: './src/index.html', //is appHtml ==='entry' use this for basic directory

htmlTemplate: './src/index.html', //is appHtml ==='entry' use this for template first,otherwise use entry content

buildDir: './dist', //build directory

buildDirWrap: true, //default false,if use true,will package just like ./dist/packageName/build code

hot: true, //whether use hot reload in development

useDefaultPostcss:true/false//default is true,use inner simple postcss

rewrites:{ from: /\/somepath\/(somepath)(\/.*)?$/, to: '/somepath.html'}

assetsPublicPath: 'https://a.com', //will inject path to static resource,for example <img src={someimg from './.../a.png'}> will result to https://a.com/a.png

serverContentBase:'',//webpack server assets base dir

buildAssetsDir: 'assets', //will copy the static resources to aim directory in production env

https: false, //or config webpack https in development

pageEnv: { A: 1, B: 2 }, //will inject process.env.A,process.env.B in the project,in html use <%= htmlWebpackPlugin.options.env.VAR %>,in js use process.env.VAR

mock: true, //default is false,use true to mock current directory

mockPath: './mock', //will mock file in mock directory,if ajax request just like /a/b, can use ./mock/a/b.json or ./mock/a/b.js to return data,in js code just like module.exports=function(req,res){res.send(...);}

mockOneFile: true, //if use this config,don't need to write many mock file in mock directory,just add index.js in mock directory, and put module.exports=function(req,res){if(req.url==='a/b'){res.send();}else if(req.url==='x/y'){...}}

themeVariables: { 'success-color': '#268543' }, //only use for less.

proxy: 'https://a.com', //default is false,use this to proxy /x/y ajax request to https://a.com/x/y

filename: {

js: 'scripts/name.contenthash.js', css: 'css/name.contenthash.css' },//default if {js:'scripts/main.js',css:'css/main.css'}

split: { name: 'react-dom', path: /node_modules\/react-dom/ } , //default false,will split one js to multiple js,and the order is from one to last

include: /some-package-path/, //default empty,only watch src directory.if you want to watch the file in node_modules,can add in the include array

babelrc: { plugins: [ 'babel-plugin-import', { libraryName: 'antd', style: true } ] }, //inject custom babel to project.Also support babel file in root directory tsOnlyTranspile:false,//default false,if true,will not check error of ts webpack: { alias() { return { Utils: path.resolve('./src/app/utils') }; }, plugins(){ return ... } } //default is empty,added config can't cover default plugin,just extend it }

other config in appConfig.js

after compiler down,use callback to custom logic

{
   ...(env === 'production'
    ? {
        callback: () => {
          console.log('compiler donw');
        }
      }
    : {})
}

sometimes, want to see dependent version in builded js,inject dependent version(this function only support current directory/node_modules),only use production.

{
  versionInject: {
  test: /main.[\w\.]\*js\$/,//default is /\.js/
  data: [ 'react', 'some-package']
  }
}

will create content in footer position

/*
 react:version:16.12.0
 some-package:version:1.0.0
*/

inject content to html,this can help you to inject some data by the async backend service in init time && production extra data.

{
  htmlInject: {
    script: `console.log('example')`,//inject script to body
    change: async opt => {//custom html
      let { $, request, html,cheerio } = opt;
      // let data=await request({url: 'http://localhost:3009/test',method:'get'});
      // data:{status,body,headers}
      $('head').append(`<script>console.log('example');</script>`);
      return $.html();
    },
    style: 'body{background:red;}'//inject script to head
  }
}

//\$ used by cheerio

//request is a wrap method by node-fetch

request({
  url: string,
  method: 'post',
  headers: {},
  body: { a: 1, b: 2 },
});

//form x-www-form-urlencoded
request({
  url: string,
  method: 'post',
  headers: {},
  body: { a: 1, b: 2 },
  bodyType: 'formParameters',
});

//form-data
request({
  url: string,
  method: 'post',
  headers: {},
  body: { a: 1, b: 2 },
  bodyType: 'formData',
});

//get query
request({
  url: string,
  method: 'get',
  headers: {},
  query: {
    a: 1,
    b: 2,
  },
});
2.3.19

4 years ago

2.3.17

4 years ago

2.3.18

4 years ago

2.3.8

4 years ago

2.3.7

4 years ago

2.3.9

4 years ago

2.3.6

4 years ago

2.3.5

4 years ago

2.3.4

4 years ago

2.3.0

4 years ago

2.3.2

4 years ago

2.3.1

4 years ago

2.3.3

4 years ago

2.2.15

4 years ago

2.2.13

4 years ago

2.2.12

4 years ago

2.2.11

4 years ago

2.2.10

4 years ago

2.2.9

4 years ago

2.2.8

4 years ago

2.2.7

4 years ago

2.2.6

4 years ago

2.2.5

4 years ago

2.2.4

4 years ago

2.2.1

4 years ago

2.2.3

4 years ago

2.2.2

4 years ago

2.2.0

4 years ago

2.1.23

4 years ago

2.1.22

4 years ago

2.1.21

4 years ago

2.1.20

4 years ago

2.1.19

4 years ago

2.1.17

4 years ago

2.1.18

4 years ago

2.1.16

4 years ago

2.1.15

4 years ago

2.1.14

4 years ago

2.1.13

4 years ago

2.1.12

4 years ago

2.1.11

4 years ago

2.1.10

4 years ago

2.1.9

4 years ago

2.1.8

4 years ago

2.1.7

4 years ago

2.1.6

4 years ago

2.1.5

4 years ago

2.1.2

4 years ago

2.1.4

4 years ago

2.1.3

4 years ago

2.1.1

4 years ago

2.0.5

4 years ago

2.0.6

4 years ago

2.1.0

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.1.15

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

5 years ago

0.1.8

5 years ago

0.1.7

5 years ago

0.1.6

5 years ago

0.1.5

5 years ago

0.1.4

5 years ago

0.1.3

5 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago