Webpack结合ES6

Posted 铭绘

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack结合ES6相关的知识,希望对你有一定的参考价值。

一、概述

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

 





























以上是关于Webpack结合ES6的主要内容,如果未能解决你的问题,请参考以下文章

没有名称的Javascript ES6导入[重复]

如何让 webpack treeshake 我的 ES6 模块?

如何在 ES6 中编译 webpack?

html里直接引用es6的js代码(不通过webpack等打包工具)

JavaScript系列文章:React总结之Webpack模块组织

react+webpack+ES6搭建项目