Question

我按照教程安装webpack，在每个浏览器中使用ES6。当我在app.js中输入一个console.log（'Hello World！'）时，我在控制台上没有得到任何东西，但首先我使用了命令'npm run build'。即使在命令提示中我也没有得到任何错误，所以我很困惑。我不知道发生了什么。

的package.json

{
 "name": "es6modules",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
   "build": "webpack --progress --watch"
  },
 "author": "",
 "license": "ISC",
 "dependencies": {
  "flickity": "^2.0.5",
  "insane": "^2.6.2",
  "jquery": "^3.2.1",
  "jsonp": "^0.2.1",
  "lodash": "^4.17.4",
  "slug": "^0.9.1"
 },
  "devDependencies": {
  "awesome-typescript-loader": "^3.1.2",
  "babel-core": "^6.24.0",
  "babel-loader": "^6.4.1",
  "babel-preset-es2015": "^6.24.0",
  "babel-preset-react": "^6.23.0",
  "typescript": "^2.2.2",
  "webpack": "^2.3.3"
 }
}

webpack.config.js

const webpack = require('webpack');
const nodeEnv = process.env.NODE_ENV || 'production';

// entry - where do u want to start app
// loaders - how should I handle spec file
module.exports = {
  devtool: 'source-map',
  entry: {
     filename: './app.js'
},
output: {
    filename: '_build/bundle.js'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: [["es2015", { "modules": false }]]
            }
        }
    ]
},
plugins: [
    // compress js - uglify js
    new webpack.optimize.UglifyJsPlugin({
        compress: { warnings: false },
        output: { comments: false },
        sourceMap: true 
    }),
    // set the actual environment - env plugin
    new webpack.DefinePlugin({
        'process.env': { NODE_ENV: JSON.stringify(nodeEnv)}
    })
  ]
}

app.js

import { uniq } from 'lodash';
import insane from 'insane';
import jsonp from 'jsonp';

console.log('Hello World!');
const ages = [1, 1, 4, 52, 12, 4];
console.log(uniq(ages));

的index.html

<html>
<head>
  <title>JS Modules</title>
</head>
<body>
  <h3>Hello World</h3>
  <script scr="_build/bundle.js"></script>
</body>

即使我没有收到任何错误，带Webpack的ES6也不起作用

0 个答案: