웹 팩 개발 환경 설정

일상 토로
끊 임 없 는 조정 과 테스트 를 통 해 react 에 관 한 웹 팩 설정 이 드디어 새롭게 나 왔 습 니 다.이번 의 중점 은 주로 개발 환경 에 집중 되 고 생산 환경 은 웹 팩 을 사용 하 는 production 기본 모델 이다.
이번 설정 은 주로:

eslint+prettier;

optimization.splitChunks;

happypack;

DllReferencePlugin & DllPlugin;

...

문서 의 중요성
솔직히 웹 팩 을 처음 접 한 친구 들 에 게 는 웹 팩 의 설정 이 아니 라 긴 package. json 이 두 려 울 것 입 니 다.그렇게 많이 의지 하 는데, 너 는 어떻게 어떤 의지 가 필요 한 지 알 수 있 니?농담 아니 야, 정말 알 아.웹 팩 의 의존 도 는 주로 loader 와 plugins 입 니 다.우 리 는 한 페이지 의 인용 이 포 장 된 후에 원래 의 구 조 는 기본적으로 존재 하지 않 는 다 는 것 을 안다.이전에 인 용 된 그림 이나 글꼴 자원 을 이전 경로 로 찾 으 면 찾 을 수 없 을 것 입 니 다.그러면 우 리 는 도 구 를 바 꿔 야 한다. url-loader | file-loader.대부분의 사람들 은 스타일 을 쓸 때 css, less, sass 를 즐겨 사용한다.이때 도 대응 하 는 도구 style-loader, css-loader, less-loader 가 있다.자 바스 크 립 트 의 새로운 기능 을 사용 하거나 호환성 을 처리 하려 면 babel-loader 을 사용 하 십시오.이상 의 이것들 은 기본적으로 간단 한 항목 에 대처 할 수 있다.근 데 사실은?
나 는 너 를 믿는다, 이 늙은이 는 정말 나쁘다!
문 서 를 보 세 요. 공식 소 개 를 보 세 요.이번에 도 babel 문 서 를 보고 일부 의존 문 서 를 통 해 웹 팩 을 설정 합 니 다. 전 과정 에 스트레스 가 없고 정통 합 니 다.그래서 문서 가 중요 합 니 다.
eslint+prettier
만약 에 팀워크 를 한다 면 코드 규범 은 매우 중요 하 다.eslint + prettier 규범 을 통과 할 수 있 습 니 다.이 두 도 구 는 각각 중점 이 있 지만 홈 페이지 에서 도 이들 의 결합 방안 을 제공 했다.자세 한 소 개 는 홈 페이지 를 참조 하 세 요.개인 적 으로 설정 파일 을 너무 많이 만 드 는 것 에 익숙 하지 않 아서 package. json 파일 에 넣 었 습 니 다.

//  webpack.common.js
{
    enforce: "pre",
    test: /\.m?jsx?$/,
    exclude: /node_modules/,
    loader: "eslint-loader",
    options: {
        fix: true,
        cache: true,
        formatter: require("eslint-friendly-formatter"),
    }
},

"eslintConfig": {
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "extends": [
        "plugin:prettier/recommended"
    ]
},
"prettier": {
    "singleQuote": true,
    "semi": true
},

개발 환경
개발 환경 은 더 이상 할 말 이 없다. 간단 하고 배치 하기 쉬 우 며 홈 페이지 는 매우 상세 하 다.

// webpack.dev.js

plugins: {
    //...
    new webpack.HotModuleReplacementPlugin()
},
devtool: "eval-source-map",
devServer: {
contentBase: path.resolve(__dirname, '..', 'dist'),
port: APP_CONFIG.port,
hot: true,
open: true
}

// index.js
//         ，   。
//         ，          。
if (module.hot) {
  module.hot.accept('./views/login/index.js', () => {
    render(App) //     
  })
}

optimization.splitChunks
이 설정 은 가방 을 나 누 는 데 사 용 됩 니 다.성능 최적화 에 있어 서 요청 수 와 요청 패키지 의 크기 도 중요 한 최적화 점 이다.요청 수량 과 요청 데이터 크기 는 합 리 적 인 범위 내 에서 제어 해 야 합 니 다.그러나 통상 적 으로 우 리 는 가방 을 내용 이 변 하지 않 는 부분 과 내용 이 변 하 는 부분 으로 나눈다.큰 가방 을 더 작은 가방 으로 나 누 기 위 한 것 이 아니 라 캐 시 메커니즘 을 충분히 활용 하기 위 한 것 이다.

// webpack.common.js
runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
        verdor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'verdors',
            chunks: 'all',
            priority: -10,
        },
        common: {
            name: 'common',
            chunks: 'all',
            minChunks: 2,
            priority: -20,
        }
    }
}

happypack
파일 을 변환 하 는 것 은 포장 과정 에서 비교적 시간 이 걸 리 는 일이 라 고 할 수 있 습 니 다. happy pack 을 통 해 이 일 을 여러 node 프로 세 스 에 분담 할 수 있 습 니 다. 그러면 포장 시간 을 크게 단축 시 킬 수 있 습 니 다 (마찬가지 로 사용 을 고려 할 수 있 습 니 다 thread-loader.그러나 프로 세 스 간 의 통신 은 비용 을 써 야 한다. 이것 은 최적화 방향 이 므 로 사용 할 지 말 지 는 고려 해 야 한다.

// loader
{
    test: /\.m?jsx?$/,
    exclude: /node_modules/,
    use: 'happypack/loader?id=js',
}
// plugins
new HappyPack({
    id: 'js',
    threadPool: happyThreadPool,
    loaders: [{
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: [['@babel/preset-env', {
        "useBuiltIns": "usage",
        "corejs": 3
        }], "@babel/preset-react"],
        plugins: ['@babel/transform-runtime',
        "@babel/plugin-proposal-class-properties", [
            "import",
            {
            "libraryName": "antd",
            "style": true
            }
        ]
        ]
    }
    }]
})

단독 babel 파일 이 마음 에 들 지 않 아서 babel 설정 이 여기 있 습 니 다.사실 바 벨 이 설정 할 내용 은 많 습 니 다.하지만 두려워 하지 마 세 요. babel 의 공식 문서 에 상세 한 설명 이 있 습 니 다.
DllReferencePlugin & DllPlugin
이전에 도 언급 했 듯 이 우 리 는 보통 optimization.splitChunks 을 사용 하여 제3자 라 이브 러 리 를 처리 하고 이 를 변 하지 않 는 부분 으로 나눈다.하지만 포장 할 때마다 이 절 차 를 반복 해 야 합 니 다.이 럴 때 우 리 는 변 하지 않 는 부분 을 한 번 포장 하면 되 지 않 을 까 생각 했다. 그 다음 에 자주 변 하 는 부분 만 포장 하면 효율 을 높 일 수 있 지 않 을 까?예, DllReferencePlugin & DllPlugin 기본적으로 해 야 할 일 은 바로 이런 것 입 니 다.그래서 우 리 는 이 두 부분 에 대해 서로 다른 설정 을 할 것 이다.

// webpack.dll.js
new webpack.DllPlugin({
    context: process.cwd(),
    path: path.join(__dirname, '..', 'dist', 'dll', '[name]-manifest.json'),
    name: '[name]_[hash]'
})
// webpack.common.js
new webpack.DllReferencePlugin({
    context: process.cwd(), 
    manifest: require(path.resolve(__dirname, '..', 'dist', 'dll', "vendor-manifest.json"))
}),

multi - spa - webpack - cli 사용 설명multi-spa-webpack-cli npm 에 발표 되 었 으 며, node 환경 에서 설치 하면 됩 니 다.Enter 를 누 르 면 모든 소스 코드 가 안에 있 습 니 다!!

npm install multi-spa-webpack-cli -g

사용 절 차 는 다음 과 같다.

# 1.      
multi-spa-webpack-cli init spa-project

# 2.       
cd spa-project

# 3.     
npm install

# 4.        
npm run build:dll

# 5.     （       ：localhost:8090）
npm start

웹 팩 시리즈:

웹 팩 맛 보기 | 웹 팩 맛 보기

핸드폰 웹 팩 비계 명령 행 도구 | 핸드폰 웹 팩 비계 의 cli 도구

웹 팩 개발 환경 설정 | 웹 팩 개발 환경 설정

다음으로 전송:https://juejin.im/post/5d0b9a535188252ea55fe8fc