반응 개발 환경을 구성하는 방법은 무엇입니까? React+webpack 개발 환경 구성 단계(심층 기사)

이 글은 주로 react+webpack의 개발 환경 구성 단계에 대한 심층적인 이해를 다루고 있습니다. 이제 이 글을 함께 읽어보겠습니다.

먼저 각 단계에 대해 이야기해 보겠습니다. 이유와 사례, 다른 기사에서는 그렇게 번거로울 필요가 없는 웹팩을 빠르게 구축하는 방법에 대해 설명할 것입니다. 기본 기사 링크 구성: http://www.php.cn/js-tutorial-409770.html

위 디렉토리로 전송:

#🎜 🎜#Directory

2. Webpack 업그레이드
6. ES6에서 ES5 모듈
7. URL 및 파일 모듈
3. Webpack 고급 장
1. 🎜🎜#2.uglify 소스 코드 암호화 및 압축
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

6. to ES5 모듈

일부 브라우저는 ES6의 일부 구문과 완전히 호환되지 않지만 nodejs는 이미 ES6을 지원하므로 webpack은 ES6 to ES5 모듈을 제공합니다.

설치 지침(개발 모드에서 사용):

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

React를 지원하려면 다음 모듈을 설치해야 합니다:

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

Webpack.config. js 코드:

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

루트 경로

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

7.url 및 파일 모듈 아래에 .babelrc 파일을 생성합니다.

이미지를 처리하는 url 모듈을 도입하고, 이미지 외 다른 파일을 처리하기 위한 파일 모듈

명령:

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

webpack.config.js 코드:

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

3. Webpack 고급 장

1 . 구문 검사기 eslint #🎜🎜 #ESLint는 낮은 수준의 오류를 방지하고 코드 스타일을 통합하는 데 사용되는 QA 도구입니다.

설치 지침:

npm install eslint eslint-loader --save-dev

eslint를 설치한 후 init 명령을 통해 규칙 파일을 만듭니다.

指令：
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

질문에 답하면 루트 디렉터리에 .eslintrc.json 형식의 파일이 생성되고, 해당 패키지가 자동으로 설치됩니다. .eslintrc.json

의 콘텐츠는 자신의 프로그래밍 습관에 따라 미세 조정할 수 있습니다. ESLINT 중국어 웹사이트

예는 다음과 같습니다.

{    "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"
    }
}

webpack.config.js 구성

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

2.uglify 소스 코드 암호화 및 압축(자세한 내용을 보려면 자세한 내용은 PHP 중국어 웹사이트

React 참조 매뉴얼

열을 참조하세요.)

은 webpack용 플러그인이므로 직접 사용하세요.

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

4.devtool
webpack에서 제공하는 보조 도구는 디버깅 중에 소스 코드의 오류 줄 수를 올바르게 표시할 수 있습니다. eval-sour-map은 개발 모드에서 사용됩니다. 다른 매개변수는 환경을 사용합니다

module.exports = {...devtool:'eval-soure-map'...}

5.happypack
로더가 여러 프로세스에서 파일을 처리하여 웹팩 구성 속도를 높이세요

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

var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().lengthvar Happypack = require('happypack');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:'happypack/loader?id=happybabel'

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

6.dll
루트 디렉터리에서

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

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

에 webpack.dll.config.js 파일을 생성합니다. Powershell 창에 다음 명령을 입력합니다.

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

두 개의 파일이 빌드에 생성됩니다. 경로, 하나의 매니페스트.json, 또 다른 파일인 Vendor.XXXX.js. Vendor.xxx.js는 html로 도입되어야 합니다(여기서는 html 템플릿에 직접 작성됨).

webpack.config.js 채우기:

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

그런 다음 Powershell에서 npm start를 입력합니다.

이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트

React 사용자 매뉴얼

열을 참조하세요.) 아래에 메시지를 남겨주세요.

위 내용은 반응 개발 환경을 구성하는 방법은 무엇입니까? React+webpack 개발 환경 구성 단계(심층 기사)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!