webpack 編譯ES6插件babel-loader

一、安裝babel-loader

參考：http://babeljs.io/docs/setup/#installation

進入項目目錄執行安裝命名：

npm install --save-dev babel-loader babel-core npm install --save-dev babel-preset-latest

babel-preset-latest 就是把全部es2015, es2016, es2017 所有包含在一塊兒了。

二、項目結構：

 

app.js代碼爲：

import layer from './components/layer/layer.js' const App = function(){  const NUM=1; alert(NUM); console.log(layer) } new App()

 

三、webpack.config.js 配置文件爲

var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/app.js', output: { path: __dirname + '/dist', filename: 'js/[name].js' }, module: { loaders: [{ test: /\.js$/, //如下目錄不處理 exclude: /node_modules/, //只處理如下目錄 include: /src/, loader: "babel-loader", //配置的目標運行環境（environment）自動啓用須要的 babel 插件  query: { presets: ['latest'] } } ] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html' }) ] }

 

四、執行命令

npm run webpack

 

五、編輯後的結果