webpack的babel配置

首先全局下载webpack3.x版本=>cnpm i webpack@3.10.0 -g

然后npm init => 一路enter下去 =>  然后开始下载插件,进行配置:

 

先来点小知识:

一,webpack支持:

1.AMD(requireJS)

主流:

2.ES Modules(推荐的)

3.CommonJS

二,核心概念:

1.entry:打包的入口

2.output:打包输出

3.loaders:处理js之外的类型的资源文件

4.plugins:插件系统=>压缩代码.混淆代码,代码分割

 

/*

entry:

1.代码的入口

2.打包的入口

3.可以是单个或多个

 

output:

1.打包生成的文件(bundle)

2.可以是一个或多个

3.自定义规则

4.配合cdn

 

module.exports = {
    module:{
        rules:[
            {
                test://\.css$/,
                use: 'css-loader'
            }
        ]
    }
}

1.处理文件

2.转化为模块

3.常用loader:(

1.编译相关:

babel-loader,ts-loader

2.样式相关:

style-loader,css-laoder,less-loader,postcss-loader

3.文件相关:

file-loader,url-loader

)

 

plugins:

1.参与打包整个过程

2.打包优化和压缩

3.配置编译时的变量

4.及其灵活

5.常用的plugins:(

1.优化相关:

CommonsChunkPlugin ->chunk文件插件

UglifyjsWebpackPlugin -> 混淆,压缩代码,生成js的sourceMap

2.功能相关:

ExtractTextWebpackPlugin -> 把css提取出来作为单独的文件

HtmlWebpackPlugin -> 帮助生成html的

HotModuleReplacementPlugin -> 模块热更新的插件

CopyWebpackPlugin -> 帮助拷贝文件(例如把第三方插件移到指定目录下)

)

 

常用名词:

1.Chunk: 代码块

2.Bundle: 打包过了的代码(本来释义大约是:一束一捆)

3.Module: 模块

 

//使用webpack

1.webpack命令

2.webpack配置

3.第三方脚手架--vue-cli等等

*/

 

下载Babel相关插件=>

// 编译es6/es7 babel-plugin:

babel-laoder,babel-core,

babel-preset-env,

babel-polyfill,

babel-plugin-transform-runtime,babel-runtime

其他:~~~~

// es2015,es2016,es2017,env

// babel-preset-react

// babel-preset-stage 0 - 3

下载命令如下:

cnpm i babel-loader@8.0.0-beta.0 @babel/core --save

cnpm i @babel/preset-env --save-dev

cnpm i babel-polyfill --save

cnpm i @babel/plugin-transform-runtime --save-dev

cnpm i @babel/runtime --save

 

/*

// babel presets:

// targets参数 =>targets.browers(指定浏览器)

// targets.browsers:'last 2 versions'

// targets.browsers:'> 1%'//市占率大于1%都要支持babel

// browerlist=> github开源项目=> can i use =>js,css等在浏览器中支持的情况
 

当没有.babelrc文件时,新建webpack.config.js:
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].[hash:5].js'
    },
    module: {
        rules:[
            {
                test: /\.css$/,
                use: 'css-loader',
                exclude: /node_modules/
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    //给这个loader指定参数
                    options: {
                        presets: [
                            ['@babel/preset-env',{
                                targets: {
                                    browsers: ['> 1%','last 2 versions']
                                    // chrome: '52'
                                }
                            }]

                        ]
                    }
                },
                exclude: '/node_modules/'
            }
        ]
    }
}

 

Babel Polyfill

// 全局垫片,为开发应用而准备,在main.js使用import 'babel-polyfill'

 

Babel Runtime Transform

// 局部垫片,为开发框架而准备:

// 1.不会污染全局

// 使用:

// 在.babelrc文件配置跟babel相关的

*/

配置.babelrc文件:

{
    "presets": [
        ["@babel/preset-env",{
            "targets": {
                "browsers": ["> 1%","last 2 versions"]
                // "chrome": "52"
            }
        }]
    
    ],
    "plugins": ["@babel/transform-runtime"]
}

当控制报错信息为:this.setDynamic is not a function时可能下载的时候使用的不是@babel/xxx而是runtime插件下载命令写成babel-xxx形式的,其他插件报错应该也是类似的问题,注意下载的命令重新下载吧

注意:package.json中的插件:

"devDependencies": {

"@babel/plugin-transform-runtime": "^7.11.5",

"@babel/preset-env": "^7.11.5",

"webpack": "^3.10.0"

},

"dependencies": {

"@babel/core": "^7.11.6",

"@babel/runtime": "^7.11.2",

"babel-loader": "^8.0.0-beta.0",

"babel-polyfill": "^6.26.0"

}