小白学 Webpack之ES6 转 ES5

安装

  • babel-loader 与webpack 协同工作的模块,加载处理 js 文件
  • @babel/core : Babel 编译器的核心模块,是babel-loader 依赖
  • @babel/preset-ent :用于分析 ES6的语法
npm i babel-loader @babel/core @babel/preset-env -D

写个es6语法

index.js

require('../css/base.css');
require('../less/style.less');
var info=require('./module');
console.log(info)

//ES6 的写法
let fn=(x,y)=>x+y;
console.log(10+20)

现在直接打包还是es6的语法,我们需要进行加载规则
描述

 {
        test:/\.js$/,
        loader:'babel-loader',
        options:{
          presets:[
            '@babel/preset-env'
          ]
        }
      }

整个

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

//css抽离
var MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
  //入口文件
  entry: './src/js/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    })
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'
            }
          }
          ,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'
            }
          }
          ,
          { loader: 'css-loader', options: { importLoaders: 1 } },
           'less-loader',"postcss-loader"
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options:{
          limit:1024*14,//设置图片大小小于这个则用base64 14KB转成base64
          name:'[name].[ext]', //打包存储位置
          outputPath:'img'//打包目录
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      },
      {
        test:/\.js$/,
        loader:'babel-loader',
        options:{
          presets:[
            '@babel/preset-env'
          ]
        }
      }

    ]
  }
}

现在打包

webpack

描述

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。