웹팩 실용 소기능 소개

지난번에 vue2-webpack3을 공유했는데 대부분이 기초적인 내용이었기 때문에 이번 호에서는 웹팩의 비교적 실용적인 기능을 계속 공유합니다.
1.overlay
overlay는 devServer의 속성에 속하며 다음과 같이 구성됩니다.

devServer: {
 overlay: {
  errors: true,
  warnings: true
 }
}

배치가 간단하다. 그렇다면 그 역할은 무엇일까?오버레이의 역할은 브라우저가 연 페이지에 터미널 컴파일을 표시할 때 발생하는 오류입니다.이 속성을 설정함으로써 앞으로 코드를 쓸 때 컴파일링이 잘못되면 터미널을 열어 도대체 무슨 보고가 잘못되었는지 볼 필요가 없고 페이지에서 직접 오류를 볼 수 있어 개발에 확실히 편리하다.
2.require.ensure
오버레이, 리퀴즈를 비교해 보자.ensure의 역할은 더욱 실용적이다. 지난번에 말한 vue2-webpack3은 여러 페이지의 응용 프로그램을 설정했는데 SPA 응용 프로그램이라면?
우리가 가장 쉽게 겪을 수 있는 문제 코드는 모두 하나의 js에 포장되어 있기 때문에 이 js는 너무 방대하다. 결국 응용 프로그램이 처음 불러올 때 기다리는 시간이 너무 길다. 그러면 이 문제를 어떻게 해결해야 합니까?require.ensure는 이 문제를 전문적으로 해결하는 데 쓰인다.
어떻게 사용해야 합니까?
사용도 간단합니다. 다음 쓰기 방법에 따라 vue의router 설정을 하면 됩니다.

const Layout = require('../Layout')
const Home = r => require.ensure([], () => r(require('../home'), home)
export default [{
 path: '/',
 component: Layout,
 children: [{
  path: '',
 component: Home
 }]
}]

리퀴드를 볼 수 있어요.ensure에는 세 개의 매개 변수가 있다
첫 번째 파라미터의 역할은 의존 목록을 설정하는 것이다. 의존된 모듈은 현재 모듈과 함께 포장된다.두 번째 파라미터는 하나의 함수로 단독으로 포장할 모듈을 리셋에 전송한다.세 번째 파라미터는chunkname로 js의 파일 이름을 설정할 수 있습니다.설정이 끝난 후에, 우리가 이 페이지를 불러올 때, 모든 페이지의 자신의 코드 부분에 속하면, 단독으로 불러옵니다.
3.webpack-bundle-analyzer
이것은 웹 패키지의 플러그인으로 우리의 모듈에 포장된 자원 상황을 분석하는 데 중요한 역할을 한다. 매우 직관적이고 실용적이다. 다음은 그의 효과도를 살펴보자.
 
그러면 어떻게 설정해야 하나요?먼저 설치를 하고 다음과 같이 설정해야 합니다.

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins = [
 new BundleAnalyzerPlugin({
 // Can be `server`, `static` or `disabled`.
 // In `server` mode analyzer will start HTTP server to show bundle report.
 // In `static` mode single HTML file with bundle report will be generated.
 // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
 analyzerMode: 'server',
 // Host that will be used in `server` mode to start HTTP server.
 analyzerHost: '127.0.0.1',
 // Port that will be used in `server` mode to start HTTP server.
 analyzerPort: 8888,
 // Path to bundle report file that will be generated in `static` mode.
 // Relative to bundles output directory.
 reportFilename: 'report.html',
 // Module sizes to show in report by default.
 // Should be one of `stat`, `parsed` or `gzip`.
 // See "Definitions" section for more information.
 defaultSizes: 'parsed',
 // Automatically open report in default browser
 openAnalyzer: true,
 // If `true`, Webpack Stats JSON file will be generated in bundles output directory
 generateStatsFile: false,
 // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
 // Relative to bundles output directory.
 statsFilename: 'stats.json',
 // Options for `stats.toJson()` method.
 // For example you can exclude sources of your modules from stats file with `source: false` option.
 // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
 statsOptions: null,
 // Log level. Can be 'info', 'warn', 'error' or 'silent'.
 logLevel: 'info'
 })
]

간단하지만 실용적이지 않나~
4.DllPlugin+DllReferencePlugin
웹 패키지 개발을 사용하는 과정에서 많은 사람들이 때때로 프로젝트의 컴파일 시작 시간이 너무 오래 기다렸다고 생각할 것이다. 왜?프로젝트가 점점 거대해질 때 우리가 의존하는 모듈이 점점 많아지기 때문에 매번 프로젝트를 시작할 때마다 컴파일링을 모두 컴파일링하고 포장해야 하기 때문에 컴파일 시간이 길어질 수 있다. 그러면 어떻게 이 문제를 해결할 것인가?
우선 사고방식은 이렇다. 보통nodemodules 파일의 의존은 기본적으로 바뀌지 않기 때문에 매번 포장할 필요가 없다. 우리는 이러한 의존을 미리 포장한 후에 계속 사용할 수 있다.
DllPlugin은 우리의 의존 패키지를 미리 포장하는 플러그인입니다.DllPlugin은 두 개의 플러그인으로 나뉘는데 하나는 DllPlugin이고 다른 하나는 DllReference Plugin이다.
먼저 DllPlugin은 다음과 같이 종속 패키지를 미리 패키지화하는 데 사용됩니다.
새 이벤트.js, 우리가 의존하는 모든 모듈을 도입하는 데 사용합니다.

import Vue from 'vue';
import ElementUI from 'element-ui';
import VouRouter from 'vue-router';

웹 패키지를 새로 만듭니다.config.dll.js의 구성 파일은 다음과 같이 구성됩니다.

const path = require('path');
const webpack = require('webpack');
module.exports = {
 entry: {
  vendor: [path.resolve(__dirname, 'vendor')]
 },
 output: {
  path: path.resolve(__dirname, './dll'),
 filename: 'dll.[name].js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname, "./dll", "[name]-manifest.json"),
 name: "[name]"
 })
 ],
 resolve: {
 extensions: ['js']
 }

설정이 완료되면 터미널에서 웹 패키지 - config 웹 패키지를 실행할 수 있습니다.config.dll.js입니다. 그리고dist/dll 디렉터리에서 dll을 볼 수 있습니다.vendore.js와vendor-manifest.json 파일, 이 DllPlugin 추출의 의존성을 완성합니다.
다음은 DllReference Plugin의 설정입니다. 이 설정은 프로젝트의 원래 웹 패키지를 찾을 수 있습니다.config.js 파일은 다음과 같이 구성됩니다.

module.exports = {
 plugins: [
  new webpack.DllReferencePlugin({
   context: path.join(__dirname, "src"),
   manifest: require("./dll/vendor-manifest.json")
  })
 ]
}

이렇게 하면 모두 설정되었지만, 이렇게 하면 문제가 하나 더 존재합니다. 프로젝트를 실행할 때 다음과 같은 프롬프트가 표시됩니다.
You are using the runtime-only build of Vue...
대략적인 뜻은 당신이 vue의template를 사용했기 때문에 vue 버전을 잘못 사용했기 때문에 웹팩에 있습니다.config.dll.js에서 vue를 다음과 같이 설정합니다.

alias: {
 'vue$': 'vue/dist/vue.common.js'
}

그렇지 않으면 기본적으로 vue를 포장합니다.runtime.common.js, 정확한 것은 포장 vue입니다.common.js 이 파일.위와 같은 설정을 한 후에 OK인 줄 알았는데 너무 순진해서 똑같은 실수를 했다.
그리고 웹팩으로 갈게요.config.js에서 같은 설정을 했는데 결과는 OK입니다.그러나 이로 인해 vue가 두 부 포장되기 때문에 당분간vendor에 vue를 도입하는 것을 포기할 수밖에 없었고 이 문제의 원인은 불분명하다.