webpack4.x 配置调试、babel配置编译ESnext、JSX

调试

webpack4.x 开启调试

--mode development

webpack3.x之前

在webpack.config.js中添加

devtool: 'source-map', //开启调试功能,上线之前需将此行注释

babel:编译JS

-babel用来编译js
- 让你很轻松的使用ES6 7 等,帮助转化

在src下新建一个src/js/a.js

export const a =12;
export const b =5;

在index.js中引入 import {a,b} from './js/a.js';

console.log(a,b);

babel-core bable-loader babel-preset-env

下载

cnpm i babel-loader babel-core babel-preset-env -D

配置

module:{ //我写一个module
    //配置一个rules(规则),rules是一个数组,里面包含一条一条的规则
    rules:[
        {
            // test 表示测试什么文件类型
            test:/\.css$/,
            // 使用 'style-loader','css-loader'
            use:ExtractTextPlugin.extract({
                fallback:'style-loader', // 回滚
                use:[
                    {loader:'css-loader'},
                    {loader:'postcss-loader'} //利用postcss-loader自动添加css前缀
                ],
                publicPath:'../' //解决css背景图的路径问题
            })
        },
        {
            test:/\.less$/,
            use:ExtractTextPlugin.extract({ //分离less编译后的css文件
                fallback:'style-loader',
                use:['css-loader','less-loader']
            })
        },
        {
            test:/\.(sass|scss)$/,
            use:['style-loader','css-loader','sass-loader']
        },
        {
        test:/\.(js|jsx)$/,
        use:['babel-loader'],
        exclude:/node_modules/
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:'url-loader',
                options:{ // 这里的options选项参数可以定义多大的图片转换为base64
                    limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                    outputPath:'images' //定义输出的图片文件夹
                }
            }]
        }
    ]
},

在根目录建一个.babelrc配置文件

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

这时就支持ESnext的所有语法了.

jsx:

cnpm i babel-preset-react -D
cnpm i react react-dom -D

在webpack中用模块化:

和node一模一样

导出:
    module.exports = xxx
引入:
    require('./xxxxx');

webpack4.x 配置调试、babel配置编译ESnext、JSX

猜你喜欢