使用ES6配置Webpack

时间：2017-05-22 15:26:41

标签： javascript webpack ecmascript-6

我正在尝试使用Webpack设置“构建过程”。问题是我正在使用ES6进行Webpack配置，而且我遇到了一些问题。

这是我的package.json：

{
  "author": "Me",
  "name": "ecmascript6-webapp",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "webpack --colors --env=prod --profile --progress",
    "lint": "[In Progress]",
    "watch": "[In Progress] webpack-dev-server --colors --env=dev --profile --progress --hot --inline",
    "test": "[In Progress] karma start"
  },
  "dependencies": {
    "babel-polyfill": "^6.16.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "rxjs": "^5.4.0",
    "zone.js": "^0.8.11"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.41",
    "@types/node": "^7.0.21",
    "babel-core": "^6.24.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.0",
    "eslint": "^3.19.0",
    "eslint-loader": "^1.7.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.3",
    "node-libs-browser": "^2.0.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.18.0",
    "stylelint": "^7.10.1",
    "stylelint-config-standard": "^16.0.0",
    "stylelint-webpack-plugin": "^0.7.0",
    "webpack": "^2.5.1",
    "webpack-dev-server": "^2.4.5",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">=7.10.0"
  }
}

我把所有东西分成多个文件;这是位于项目根目录（webpack.config.babel.js）中的“主要”（或入口点）配置文件：

/* eslint-env node */
export default function config(env) {
  return require(`./config/webpack.${env}.js`);
}

...然后我有一个config/目录webpack.common.js：

/* eslint-env node */
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { join, resolve } from 'path';
import * as webpack from 'webpack';

export const config = {
  entry: {
    'polyfills': './src/scripts/polyfills.js',
    'vendor': './src/scripts/vendor.js',
    'main': './src/scripts/main.js'
  },

  module: {
    rules: [
      { test: /[.]css$/, use: ['to-string-loader', 'css-loader'] },
      { test: /[.]html$/, loader: 'html-loader' },
      { test: /[.]js$/, exclude: /node_modules/, use: ['babel-loader'], query: { presets: ['es2015'] } },
      { test: /[.](gif|ico|jpe?g|png)$/, use: 'file-loader' },
      { test: /[.](eot|svg|ttf|woff|woff2)$/, use: { loader: 'url-loader', options: { limit: 100000 } } }
    ]
  },

  output: {
    filename: '[name].bundle.js',
    path: resolve(__dirname, '../build')
    //publicPath: '/assets/',
    //sourceMapFilename: '[name].map'
  },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: [/*'main', */'polyfills', 'vendor'].reverse() }),
    new HtmlWebpackPlugin({ chunksSortMode: 'dependency', template: 'src/index.html' })
  ],

  resolve: {
    extensions: ['.js'],
    modules: [join(__dirname, 'src'), 'node_modules']
  }
};

...和webpack.prod.js：

/* eslint-env node */
import { webpack } from 'webpack';
import *  as merge from 'webpack-merge';
import { config } from './webpack.common.js';

export default function setup(env) {
  console.log(`env = ${env}`);
  return merge(config, {
    devtool: 'cheap-module-source-map', // Create Sourcemaps for the bundle

    //htmlLoader: { minimize: false },

    //output: {
    //  path: helpers.root('dist'),
    //  publicPath: '/',
    //  filename: '[name].[hash].js',
    //  chunkFilename: '[id].[hash].chunk.js'
    //},

    plugins: [
      new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }),
      new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }),
      //new webpack.NoEmitOnErrorsPlugin(),
      //new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        beautify: false,
        comments: false,
        compress: { screw_ie8: true },
        mangle: { screw_ie8: true, keep_fnames: true }
      })
    ]
  });
}

这是我到目前为止所犯的错误（我无法弄清楚）：

gorre@uplink $ npm run build

> ecmascript6-webapp@0.1.0 build /Users/gorre/Workshop/ecmascript6-webapp
> webpack --colors --env=prod --profile --progress

/Users/gorre/Workshop/ecmascript6-webapp/node_modules/webpack/bin/convert-argv.js:492
                throw new Error("'output.filename' is required, either in config file or as --output-filename");
                ^

Error: 'output.filename' is required, either in config file or as --output-filename
    at processOptions (/Users/gorre/Workshop/ecmascript6-webapp/node_modules/webpack/bin/convert-argv.js:492:11)
    at processConfiguredOptions (/Users/gorre/Workshop/ecmascript6-webapp/node_modules/webpack/bin/convert-argv.js:141:4)
    at module.exports (/Users/gorre/Workshop/ecmascript6-webapp/node_modules/webpack/bin/convert-argv.js:117:10)
    at Object.<anonymous> (/Users/gorre/Workshop/ecmascript6-webapp/node_modules/webpack/bin/webpack.js:153:40)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.runMain (module.js:605:10)
    at run (bootstrap_node.js:427:7)
    at startup (bootstrap_node.js:151:9)
    at bootstrap_node.js:542:3

这是我项目的结构：

├── config
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
├── karma.conf.js
├── package.json
├── src
│   ├── favicon.ico
│   ├── images
│   │   └── es6-logo.png
│   ├── index.html
│   ├── scripts
│   │   ├── bootstrap.js
│   │   ├── lib
│   │   │   ├── Animal.js
│   │   │   └── Dog.js
│   │   ├── main.js
│   │   ├── polyfills.js
│   │   └── vendor.js
│   └── styles
│       └── main.css
├── test
│   ├── mock
│   └── spec
└── webpack.config.babel.js

我认为这是我导入模块的方式的问题......或者这是我的猜测。提前谢谢！

1 个答案:

答案 0 :(得分：0)

Webpack需要一个配置文件，它是一种有效的javascript对象类型。

首先，您需要在构建脚本中添加配置文件参数：

"build": "webpack --config ./config/webpack.config.prod.js --colors --env=prod --profile --progress"

webpack.config.prod.js 必须导出有效的webpack配置对象，而不是函数：

module.exports = merge(config, {
  devtool: 'cheap-module-source-map'
  ..
})

（我假设merge函数返回一个有效的webpack配置对象）

如果你想使用ES6导入/导出语句，那么你需要在webpack处理之前编译 webpack.config.prod.es6.js ：

// webpack.config.prod.es6.js
export default merge(config, {
  devtool: 'cheap-module-source-map'
  ..
})

您可以将编译脚本添加到 package.json ：

"compile": "babel ./config/webpack.config.prod.es6.js --out-file ./config/webpack.config.prod.js"

现在最好更新我们的构建脚本，因为编译必须在 webpack.config.prod.es6.js

的任何更改中完成 
"build": "npm run compile && webpack --config ./config/webpack.config.prod.js --colors --env=prod --profile --progress"

您的webpack配置中似乎不需要ES6语法。只需将 webpack.config。{env} .js 文件创建为有效的webpack configuration对象，您就可以了。

相关问题
最新问题