vue 연구 노트 (1)--webpack 연구

不言

풀어 주다： 2018-03-31 10:11:57

원래의

1999명이 탐색했습니다.

Vue를 배우기 전에 먼저 프론트엔드 패키징 도구인 webpack을 배워보세요. 관심 있는 친구들은 webpack에 대한 학습 내용을 공유합니다.

Vue는 최근 프로젝트에서 사용되었다는 이름을 들었습니다. 오랜 시간이 걸렸지만 나는 그것에 대해 거의 알지 못합니다. 이 기회를 통해 vue를 배우십시오.
Vue를 배우기 전, 현재 매우 우수하고 널리 사용되는 패키징 도구인 프런트엔드 패키징 도구인 webpack을 먼저 배웠습니다. 공식 webpack 튜토리얼을 따라 학습하세요. 하지만 공식 튜토리얼은 현재 webpack3을 기반으로 하고 있으며 실제 사용은 webpack4입니다. 현재로서는 몇 가지 큰 차이점이 있으며, 편의를 위해 여기에도 간단한 기록을 작성하겠습니다. 향후 검토 및 연구.

하나의 웹팩 개념

webpack은 정적 컴파일 도구(사전 컴파일)[정적 모듈 번들]로 seaJs 및 requireJS(온라인 컴파일)와는 다르며 javac와 jit의 차이점과 비슷합니다.
webpack의 여러 개념

Entry

Entry 파일, webpack 컴파일된 항목, webpack은 모든 종속성의 루트를 찾고 결국 모든 종속성을 연결합니다

output

Edit 결과(번들) 출력 위치 , 그리고 출력 결과의 이름을 어떻게 지정하는지 등등

loader

webpack은 다양한 파일을 처리하는데 사용되며, 로더는 (이론상) import를 사용하여 유입된 모든 파일을 처리할 수 있습니다. 로더는 module.rules에서 구성해야 합니다. 테스트(처리할 파일) 및 사용(사용할 로더)이라는 두 가지 필수 속성이 있습니다. 구성이 잘못된 경우 webpack은 오류

플러그인을 보고합니다.

plugin 다양한 작업을 처리하는 데 사용됩니다. 로더보다 범위와 역할이 더 큽니다. 사용 시 require()를 사용하여 플러그인에 추가해야 합니다. 서로 다른 목적으로 플러그인을 여러 번 사용하는 경우 new를 사용하여 플러그인을 초기화해야 합니다

두 환경 분리

webpack3의 webpack.DefinePlugin 플러그인을 사용하여 서로 다른 환경 분리: 개발 그리고 Production

new webpack.DefinePlugin({
    //许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容
     // 在webpack4中mode会自动设置该信息，废弃该配置
    "process.env.NODE_ENV": JSON.stringify("development")
})

로그인 후 복사

webpack4에서 이 방법을 사용하는 것은 더 이상 유효하지 않으며 다른 환경을 지정하려면 새로 제공되는 모드를 사용해야 합니다.
모드는 개발 모드와 프로덕션 모드로 나누어져 있으며, 하나를 설정해야 하며, 그렇지 않으면 오류 메시지가 보고됩니다.

// 环境设置，webpack4必须有该值，使用该属性来设置不同的环境，目前有development和production两种，也可以使用：--mode development设置
// process.env.NODE_ENV会被该设置覆盖
mode:"development",

로그인 후 복사

3개의 소스 맵

webpack4에서는 기본적으로 eval을 사용합니다. devtool: "inline-source-map"을 설정하여 기본 설정을 변경할 수 있습니다. 프로덕션 환경에서는 "소스맵"을 사용하는 것을 권장합니다

4개 코드 분리

4.1 CSS 등 분리

css와 js를 분리하려면 extract-text-webpack-plugin 플러그인을 사용하세요. 공식 예:
https://doc.webpack-china.org...
구체적인 설정은 다음과 같습니다:

// 将CSS分离 https://doc.webpack-china.org/plugins/extract-text-webpack-plugin
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//使用extractTextPlugin就不能在单独使用style-loader
config.module:{
     rules:[
      {
        test:/\.css$/,
        use : ExtractTextPlugin.extract({
            fallback : "style-loader",
            //这样使用会出现url()解析路径错误的问题
            //use : "css-loader"
            //使用该方式解决url()路径问题
            use:[
                {
                    loader:"css-loader",
                    options:{
                        //用于解决url()路径解析错误
                        url:false,
                        minimize:true,
                        sourceMap:true
                    }
                }
                ]
            })
        },  
    ]
}

로그인 후 복사

4.2 공통 모듈 분할

CommonChunkPlugin이 webpack4에 의해 폐기되었기 때문에 webpack4에서는 SplitChunkPlugin을 사용하여 공통 모듈을 추출할 것을 권장합니다. 모듈. webpack 공식 홈페이지(https://webpack.js.org)에서 해야 하기 때문에... 온라인 정보 소개가 그리 자세하게 되어 있지는 않습니다. 온라인 검색 결과를 토대로 드디어 퍼블릭 모듈의 분리가 이루어졌는데요. 아직 해결되지 않은 질문이 많습니다. 관련 정보를 찾아야 합니다.
공식 예시는 https://github.com/webpack/we...
구체적인 구성은 다음과 같습니다.
SplitChunkPlugin을 사용하는 방법은 두 가지가 있습니다:
One, Optimization.splitChunks

optimization: {
        //提取公共模块，webpack4去除了CommonsChunkPlugin，使用SplitChunksPlugin作为替代
        //主要用于多页面
        //例子代码 https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
        //SplitChunksPlugin配置，其中缓存组概念目前不是很清楚
        splitChunks: {
            // 表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
            chunks: "all",
            // 表示在压缩前的最小模块大小，默认为0；
            minSize: 30000,
            //表示被引用次数，默认为1
            minChunks: 1,
            //最大的按需(异步)加载次数，默认为1；
            maxAsyncRequests: 3,
            //最大的初始化加载次数，默认为1；
            maxInitialRequests: 3,
            // 拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；设置ture则使用默认值
            name: true,
            //缓存组，目前在项目中设置cacheGroup可以抽取公共模块，不设置则不会抽取
            cacheGroups: {
                //缓存组信息，名称可以自己定义
                commons: {
                    //拆分出来块的名字,默认是缓存组名称+"~" + [name].js
                    name: "test",
                    // 同上
                    chunks: "all",
                    // 同上
                    minChunks: 3,
                    // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
                    enforce: true,
                    //test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
                    test:""
                },
                //设置多个缓存规则
                vendor: {
                    test: /node_modules/,
                    chunks: "all",
                    name: "vendor",
                    //表示缓存的优先级
                    priority: 10,
                    enforce: true
                }
            }
        }
    }

로그인 후 복사

두 번째: new webpack.optimize.SplitChunksPlugin
구체적인 구성은 Optimization.splitChunks와 동일합니다.

다섯 가지 핫 교체

구현하려면 다음 구성을 사용하세요.
webpack3에서 다음 구성을 사용하세요

//查看要修补(patch)的依赖,被optimization.namedModules代替，development模式下默认开启，显示模块的相对路径
new webpack.NamedModulesPlugin(),
// 热替换插件
new webpack.HotModuleReplacementPlugin(),

로그인 후 복사

webpack4에서, NamedModulesPlugin은 개발 모드에서 기본 설정으로 설정되었습니다. 자동으로 켜지므로 구성할 필요가 없습니다.