Webpack結合ES6

標籤：kde   結合   require   roi   svg   create   gen   bsp   打包   

一、概述

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