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

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');