webpack2使用ch6-babel使用 處理es6 優化編譯速度

1 目錄結構

安裝依賴

cnpm install --save-dev babel-loader babel-core babel-preset-env babel-preset-latest

"babel-core": "^6.24.0", "babel-loader": "^6.4.1", "babel-preset-env": "^1.3.2", "babel-preset-latest": "^6.24.0",

2 webpack.config.js

 

const webpack = require('webpack'),
      htmlWebpackPlugin = require('html-webpack-plugin'),
      path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name]-[chunkhash].js',
    },
    module: { //loader第三種使用方式 配置項設置 其餘1引入 2cli
      loaders: [
          {
              test: '/\.js$/',  //正則匹配.js文件
              loader: 'babel',  //使用babel 要先安裝 cnpm install --save-dev babel-loader babel-core
              exclude: path.resolve(__dirname, 'node_modules'), //優化babel 排除
              include: path.resolve(__dirname, 'src'),//優化babel 打包範圍
              query: {
                  presets: ['env'] //使用方式之1 cnpm install --save-dev babel-preset-env 告訴babel如何處理 
//方式2 package.json中指定 方式3 cli運行時指定
              }
          },

      ]
    },
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body'
        })
    ]
};

 

3 app.js

import layer from './components/layer/layer.js'


const  App = function () {
    console.log(layer);
}

new App();

4 layer.js

//import tpl from 'layer.html';

function layer() {
    return {
        name: 'layer',
        tpl: tpl
    }
};

export default layer;

5 打包

 

6 驗證是否成功

http://localhost:63342/web/webpack-demo/dist/index.html 運行