• 九: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
  • 相关阅读:
    scrapy下载图片第一波
    scrapy之防ban策略
    xml之dtd约束
    Java jdbc相关
    XSS获取cookie
    反射型XSS & DVWA
    MySQL数据库设计规范
    SQL Server 查询指定时间是一年当中的第几周
    js验证15位或18位身份证
    C# Process.Start()
  • 原文地址:https://www.cnblogs.com/minghui007/p/7269058.html
Copyright © 2020-2023  润新知