Webpack 2.x basic development environment for reactjs configuration, webpackreactjs

Webpack 2.x basic development environment for reactjs configuration, webpackreactjs

This article describes how to configure the basic development environment of reactjs in webpack 2.x:

Current webpack version: 2.2; react: 15.4.2

The upgrade of webpack from 1.x to 2.x replaces several interfaces, including important interfaces such as module. loaders, which have been discarded (detailed changes ). Currently, 1. in Version x, the development environment of react is configured according to Version 2.2. The configuration file will be gradually optimized later for less complex web application development.

If you have used webpack before, the changes are not significant. The following assumes that you have never been familiar with similar packaging tools (but it is better to know npm and jsx), and you will be familiar with these tools as a newbie like me. If you have any problems, please kindly advise.

If your react project introduces the following three js files to compile jsx on the browser side, you do not need to use webpack as the development environment.

 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

However, in the product launch stage, we do not recommend this. 1. the user needs to download these three files, which wastes bandwidth. 2. Compile the jsx file on the browser after the download is complete, which wastes time and resources.

If you package and compile the project code in the development phase into a js file and then push it online, you can: 1. Reduce the number of HTTP requests to 1. 2, you do not need to waste time and resources on the client to compile the code, and directly run the compiled js Code before going online.

If it is the former, the type value of the script label that introduces the project js code is "text/babel"; if it is the latter, the type value is "text/javascript ".

How to do it?

1. Install nodejs and use its npm package management tool. Why npm? The react dependency, babel dependency, and webpack tools will be downloaded later. It is much easier to use npm. Npm is not used, but it will undoubtedly increase many difficulties.

2. Create a new project folder and open the terminal in the folder, that is, run the command line (Shift + right-click) in Windows. npm init If you do not have any special requirements, you can press the Enter key until the last step.

3. Execute the following command on the terminal to download all required dependencies and tools.

Copy codeThe Code is as follows:
Npm install react-dom babel-loader babel-core babel-preset-es2015 webpack-dev-server -- save-dev

4. Configure the webpack configuration file. Create a webpack. config. js file in the root directory at the same level as package. json. Write the following content into the file:

// Webpack. config. jsvar webpack = require ("webpack"); var path = require ("path"); module. exports = {entry :'. /dev/entry. jsx ', // The entrance file devtool: 'source-map', // locate the code before compilation during debugging. We recommend that you install react plug-in output: {path: path. resolve (_ dirname ,". /dist/js/"), filename: 'bundle. js '// package the output file}, module: {rules: [{test :/\. jsx? $/, // Test to determine whether it is. js or. jsx is used to compile es6 and jsx. exclude:/(node_modules | bower_components)/, loader: 'babel-loader ', query: {presets: ['es2015 ', 'react ']}, resolve: {// now you can directly use import Func from' When importing the file '. /file ', no need to use import Func from '. /file. js 'Extensions :['. js ','. jsx ','. json ','. coffee ']};

Directory structure:

app  |__dev  |  |__components  |  |__entry.jsx  |__dist  |  |__css  |  |__js  |    |__bundle.js  |  |__index.html  |__node_modules  |__package.json  |__webpack.config.js

The configuration file is described as follows:

1. The red part can be customized.

2. The react project file can be in js or jsx format, but the output file is a file referenced in the HTML file and must be in js format.

3. The configuration entry file is under the dev directory, and the output file is under the dist directory. You can customize the configuration.

4. module. rules is the new interface of 2. x, replacing the previously used module. loaders.

5. If query is removed, an error is returned. You can also write the rule to the package. json file. For details, see the reference link.

5. Add the following code in the scripts section of the package. json file:

 "scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "start": "webpack-dev-server --hot --open --content-base ./dist/",  "deploy": "webpack -p --progress --config webpack.config.js" },

Note: The -- content-base parameter specifies the location of the root html file.

6. npm start is used in the development stage to automatically compile and refresh the code. npm run build is used to compile the production environment code.

Note: The webpack-dev-server automatically compiles code and refreshes the browser. The compiled files are not written to the disk, but are kept in the memory, therefore, the script file src introduced in the html file is "bundle. js ", no path, if in webpack. config. the "publicPath" is specified in ouput of js, and the situation is different. For details, refer to the third part of the reference link.

Appendix: common parameters used during webpack compilation, which can be configured separately in the scripts compilation command

• Compile in the webpack Development Environment
• Webpack-p product compilation and Compression
• Webpack -- continuously listen for file changes in the watch development environment for compilation (very fast !)
• Webpack-d introduces source maps

Eslint support:

npm i eslint babel-eslint eslint-plugin-react --save-dev

Create a new. eslintrc file and write basic react parameters.

{  "plugins": ["react"],  "extends": ["eslint:recommended", "plugin:react/recommended"],  "parser": "babel-eslint"}

We recommend that you install the eslint plug-in corresponding to the editor to display the error information in real time on the interface.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.