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

小灰灰 2022-05-28 14:09 269阅读 0赞

**调试**

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

1.  下载
    
        cnpm i babel-loader babel-core babel-preset-env -D
2.  配置
    
        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');