Webpack结合ES6

Posted 2020-09-30 铭绘

一、概述

ES6现在正是风华正茂的时候，各个公司都是 尝试去使用，并且作为前端工程师ES6也是体现技术的亮点。但是，现在的浏览器对es6支持不是 特别的兼容，最终还是需要把es6转换为es5，webpack使用babel-loader加载器进行转换，它的配置 也是非常的容易。


二、配置babel-loader


如果现在你的项目还没有对ES6的语法支持，那就有点没有逼格了，其实大家都知道这个也很简单，因为我们有伟大的Babel

首先 装各种loader

npm install babel-loader babel-preset-es2015 transform-loader --save-dev

 

 然后配置加载器

var webpack = require(‘webpack‘);
var WebpackDevServer = require("webpack-dev-server");
var path = require(‘path‘);
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, ‘../‘);
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, ‘./node_modules‘);
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, ‘./dist‘);
// 最后输出放置公共资源的目录
var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require(‘copy-webpack-plugin‘);
module.exports = {
        //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字    
        entry: {
            app: [‘./src/js/index.js‘],
            vendors: [‘jquery‘, ‘moment‘], //需要打包的第三方插件
            login: [‘./src/css/login.less‘]
        },
        //输出的文件名,合并以后的js会命名为bundle.js    
        output: {
            path: path.join(__dirname, "dist/"),
            publicPath: "http://localhost:8088/dist/",
            filename: "bundle_[name].js"
        },
        module: {
            loaders: [
                // 把之前的style&css&less loader改为            
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract(‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘),
                    exclude: /node_modules/

                }, {
                    test: /\.less$/,
                    exclude: /node_modules/,
                    loader: ExtractTextPlugin.extract(‘style‘, ‘css!autoprefixer?{browsers: ["last 2 version", "IE 8", "android 4.0", "ios 6"]}!less?strictMath&noIeCompat!postcss‘)
                },
                { test: /\.(png|jpg|gif|svg)$/, exclude: /node_modules/, loader: ‘url?limit=8092‘ }, 
　　　　　　　　　 {test: /\.js$/,exclude: /node_modules/,use: {loader: ‘babel-loader‘,options: {presets: [‘es2015‘]}}
                }]}

 

es2015这个参数是babel的plugin，可以支持各种最新的es6的特性。现在我们可以改掉CommonJS风格的文件了。

sub.js

 

export default function() {
  var element = document.createElement(‘h2‘);
  element.innerHTML = "Hello h2 world hahaha";
  return element;}

 

index.js

var login=require(‘./login‘);
var data = require(‘data‘);
require(‘./../css/index.css‘);
require(‘./../css/login.less‘);
import generateText from ‘./sub‘;
$("#welcome").html(generateText());

 

执行

webpack-dev-server --hot --inline