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

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

调试

webpack4.x 开启调试

  1. --mode development

webpack3.x之前

  1. 在webpack.config.js中添加
  3. devtool: 'source-map', //开启调试功能,上线之前需将此行注释

babel:编译JS

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

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

  1. export const a =12;
  2. export const b =5;

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

  1. console.log(a,b);

babel-core bable-loader babel-preset-env

  1. 下载

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

  2. 配置

    1. 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配置文件

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

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

jsx:

  1. cnpm i babel-preset-react -D
  2. cnpm i react react-dom -D

在webpack中用模块化:

  1. 和node一模一样
  3. 导出:
  4.     module.exports = xxx
  5. 引入:
  6.     require('./xxxxx');

发表评论

表情：
评论列表 （有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读