How to configure react development environment? React+webpack development environment configuration steps (in-depth article)-JS Tutorial-php.cn

How to configure react development environment? React+webpack development environment configuration steps (in-depth article)

寻∝梦

Release： 2018-09-11 10:59:25

Original

1523 people have browsed it

This article mainly talks about the in-depth understanding of the development environment configuration steps of react webpack. Now let’s read this article together

Here we will first explain the reasons and practices of each step. Other articles will talk about how to quickly build webpack, which doesn’t have to be so complicated. Configure basic article link: http://www.php.cn/js-tutorial-409770.html

Transfer to the above directory:

Directory
2. Webpack upgrade
6. ES6 to ES5 module
7. URL and file module
3. Webpack advanced chapter
1. Syntax checker eslint
2.uglify source code encryption and compression
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

6.ES6 to ES5 module

Because some browsers do not support the ES6 part The syntax is not fully compatible, but nodejs already supports ES6, so webpack provides an ES6 to ES5 module.
Installation instructions (used in development mode):

npm install babel-loader babel-core babel-preset-env webpack --save-dev

Copy after login

If you want to support react, you need to install the following modules:

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev

Copy after login

Webpack.config.js code:

module.exports = {...module:{    
    rules:[...
   {
        test:/\.jsx$/,
        exclude:/(node_modules|bower_components)/,//排除XXX类型文件
        use:{
            loader:&#39;babel-loader&#39;           
        }
    }
]
}...}

Copy after login

Create the .babelrc file under the root path

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

Copy after login

7.url and file modules
Introduce the url module to process images, and the file module to process other file types other than images
Instructions:

npm install url-loader file-loader --save-dev

Copy after login

webpack.config.js Code:

module.exports = {...
    {   //配置辅助loader,处理图片  
        test:/\.(png|jpg|gif)$/,
        loader:&#39;url-loader&#39;,
        options:{limit:8192,name:"images/[name].[ext]"}
    },
    { //处理图片外的其他文件类型
        test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
        include:path.resolve(__dirname,&#39;src&#39;),
        loader:&#39;file-loader?name=[name].[ext]&#39; 
    }...}

Copy after login

3. Advanced webpack
1. Syntax checker eslint
ESLint is a QA tool used to avoid low-level errors and unify the code style .
Installation instructions:

npm install eslint eslint-loader --save-dev

Copy after login

After installing eslint, then create a rule file through the init command.

指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init  

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

Copy after login

After answering the question, a file in .eslintrc.json format will be generated under the root directory, and the corresponding package will be automatically installed. .eslintrc.json
The content inside can be fine-tuned according to your own programming habits. ESLINT Chinese website
Here is an example:

{    "env": {        "browser": true,        "commonjs": true,        "es6": true,        "node": true
    },    "extends": "plugin:react/recommended",    "parserOptions": {        "ecmaVersion": 8,//ECMAScript syntax 最新版本
        "ecmaFeatures": {            "impliedStrict": true,            "experimentalObjectRestSpread": true,            "jsx": true
        },        "sourceType": "module"
    },    "plugins": [        "react"
    ],    "rules": {        "semi": [            "error",            "always"
        ],              
        "no-debugger": "error",//不允许用debugger这个关键字
        "no-dupe-args": "error",//不允许函数参数同名
        "no-caller": "error",//不允许用callee等，es6严格模式不支持
        "no-unmodified-loop-condition": "error",        "no-with": "error",//不允许用with来声明
        "no-catch-shadow": "error"
    }
}

Copy after login

Webpack.config.js configuration

module: {
        rules: [        ...{
        test:/\.js$/,
        enforce:&#39;pre&#39;,
       loader:&#39;eslint-loader&#39;,
       include:path.resolve(__dirname,&#39;src&#39;)
    }...]
}

Copy after login

2.uglify source code encryption and compression (if you want to see more, go to PHP Chinese Learn in the column of the NetReact Reference Manual)

is a plug-in of webpack, just use it directly.

webpack.config.js 代码：
module.exports = {   ...
 plugins:[
 ..  
new webpack.optimize.UglifyJsPlugin(
{output: { 
    comments:false,//删除代码中所有注释
},
compress:{
 warnings:false,
}
})
]...}

Copy after login

4.devtool
The auxiliary tool provided by webpack can correctly display the number of error lines in the source code during debugging. eval-soure-map is used in development mode. Other parameters use the environment

module.exports = {...devtool:&#39;eval-soure-map&#39;...}

Copy after login

5.happypack
Let the loader process the file to speed up the webpack construction

安装指令：npm install happypack --save-dev

Copy after login

var os = require(&#39;os&#39;);//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require(&#39;happypack&#39;);var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量module.config.js 下面的配置module.exports = {
...module:{    rules:[
 {        test:/\.js$/,    
        include:path.resolve(__dirname),        loader:&#39;happypack/loader?id=happybabel&#39;

    }
]
}plugins:[new Happypack({    id:"happybabel",    loaders:[&#39;babel-loader&#39;],    threadPool:happypackThreadPool,    cache:true,    verbose:true}),
]
}

Copy after login

6.dll
Create a webpack.dll in the root directory .config.js file

//webpack.dll.config.js 的内容：const webpack = require(&#39;webpack&#39;);const path = require("path");const fs=require(&#39;fs&#39;);const vendors = [  &#39;react&#39; //这里添加第三方库文件

];module.exports = {  entry: {    vendor: vendors,
  },  output: {    path: path.join(__dirname+&#39;/build&#39;),    filename: &#39;[name].[chunkhash].js&#39;,    library: &#39;[name]_[chunkhash]&#39;,
  },  plugins: [    new webpack.DllPlugin({      path: path.join(__dirname+"/build"+&#39;/manifest.json&#39;),      name: &#39;[name]_[chunkhash]&#39;,      context: __dirname,
    }),
  ],
};//console.log(path.join(__dirname+"/build"));

Copy after login

Type the following command in the Powershell window:

webpack --config webpack.dll.config.js -p

Copy after login

Two files will be generated in the build path, one is manifest.json and the other is vendor.XXXX.js document. vendor.xxx.js needs to be introduced in html (written directly in the html template here).
webpack.config.js Fill in:

 moule.exports = { ...
 plugins:[  ...
 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require(&#39;./build/manifest.json&#39;),
    }),    ...]
....
}

Copy after login

Then type npm start in Powershell.

This article ends here (if you want to see more, go to the PHP Chinese website React User Manual column to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to configure react development environment? React+webpack development environment configuration steps (in-depth article). For more information, please follow other related articles on the PHP Chinese website!