Минимальная настройка веб-пакета для Aurelia без простого webpack

Question

Я хочу установить минимальную конфигурацию webpack, которая поддерживает Aurelia и Babel (для ES2016). Я хочу получить этот без с помощью easy-webpack (официальный скелет из aurelia в зависимости от easy-webpack, но я хочу использовать простой веб-пакет).

Любая идея как правильно настроить минимальный веб-пакет + aurelia + babel?

Answer 1

Обновление от 06 июня 2017 года: Этапы, упомянутые здесь, устарели и неактуальны, поскольку официальный скелет удалил зависимость от easy-webpack. Я держу это только по историческим причинам.

---

Update 9-Nov-2016: Для лучшей версии этого решения, см this или this.

---

Хорошо, вот полный процесс, основанный на скелете официального веб-сайта Aurelia.

После загрузки skeleton-esnext-webpack от Aurelia github мы заменим любую ссылку на @easy-webpack стандартными модулями webpack.

В package.json, удалить все модули в "devDependencies", который начинается с @easy-webpack:

"@easy-webpack/config-aurelia": "^2.0.1", 
    "@easy-webpack/config-babel": "^2.0.2", 
    "@easy-webpack/config-common-chunks-simple": "^2.0.1", 
    "@easy-webpack/config-copy-files": "^1.0.0", 
    "@easy-webpack/config-css": "^2.3.2", 
    "@easy-webpack/config-env-development": "^2.1.1", 
    "@easy-webpack/config-env-production": "^2.1.0", 
    "@easy-webpack/config-external-source-maps": "^2.0.1", 
    "@easy-webpack/config-fonts-and-images": "^1.2.1", 
    "@easy-webpack/config-generate-index-html": "^2.0.1", 
    "@easy-webpack/config-global-bluebird": "^1.2.0", 
    "@easy-webpack/config-global-jquery": "^1.2.0", 
    "@easy-webpack/config-global-regenerator": "^1.2.0", 
    "@easy-webpack/config-html": "^2.0.2", 
    "@easy-webpack/config-json": "^2.0.2", 
    "@easy-webpack/config-test-coverage-istanbul": "^2.0.2", 
    "@easy-webpack/config-uglify": "^2.1.0", 
    "@easy-webpack/core": "^1.3.2", 

и заменить их следующим:

"aurelia-webpack-plugin": "^1.1.0", 
    "copy-webpack-plugin": "^3.0.1", 
    "html-webpack-plugin": "^2.22.0", 
    "babel-core": "^6.17.0", 
    "babel-loader": "^6.2.5", 
    "babel-polyfill": "^6.16.0", 
    "css-loader": "^0.25.0", 
    "file-loader": "^0.9.0", 
    "html-loader": "^0.4.4", 
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 

и использовать следующее содержимое для webpack.config.js:

var path = require('path'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var AureliaWebpackPlugin = require('aurelia-webpack-plugin'); 
var project = require('./package.json'); 

const DEBUG = true; 
const title = 'Aurelia Navigation Skeleton'; 
const baseUrl = '/'; 
const rootDir = path.resolve(); 
const srcDir = path.resolve('src'); 
const outDir = path.resolve('dist'); 

const aureliaBootstrap = [ 
    'aurelia-bootstrapper-webpack', 
    'aurelia-polyfills', 
    'aurelia-pal-browser', 
    'regenerator-runtime', 
]; 

const aureliaModules = Object.keys(project.dependencies).filter(dep => dep.startsWith('aurelia-')); 

module.exports = { 
    //debug: true, 
    //devtool: 'source-map', 
    entry: { 
     'app': [], // <-- this array will be filled by the aurelia-webpack-plugin 
     'aurelia-bootstrap': aureliaBootstrap, 
     'aurelia-modules': aureliaModules.filter(pkg => aureliaBootstrap.indexOf(pkg) === -1) 
    }, 
    output: { 
     path: outDir, 
     filename: '[name]-bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, // or include: path.resolve('src'), 
       loader: 'babel-loader', 
       query: { 
        presets: ['es2015', 'stage-1'], 
        plugins: ['transform-decorators-legacy'] 
       } 
      }, { 
       test: /\.html$/, 
       exclude: /index\.html$/, 
       loader: 'html-loader' 
      }, { 
       test: /\.css$/, 
       loaders: ['style-loader', 'css-loader'] 
      }, { 
       test: /\.(png|jpe?g|gif|svg|eot|woff|woff2|ttf)(\?\S*)?$/, 
       loader: 'url-loader?limit=100000&name=[name].[ext]' 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      regeneratorRuntime: 'regenerator-runtime', // to support await/async syntax 
      Promise: 'bluebird', // because Edge browser has slow native Promise object 
      $: 'jquery', // because 'bootstrap' by Twitter depends on this 
      jQuery: 'jquery', // just an alias 
      'window.jQuery': 'jquery' // this doesn't expose jQuery property for window, but exposes it to every module 
     }), 
     new HtmlWebpackPlugin({ 
      title: title, 
      template: 'index.html', 
      chunksSortMode: 'dependency' 
     }), 
     new AureliaWebpackPlugin({ 
      root: rootDir, 
      src: srcDir, 
      title: title, 
      baseUrl: baseUrl 
     }), 
     new CopyWebpackPlugin([{ 
      from: 'favicon.ico', 
      to: 'favicon.ico' 
     }]), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['aurelia-modules', 'aurelia-bootstrap'] 
     }), 
     /*new webpack.optimize.UglifyJsPlugin({ 
      beautify: DEBUG ? true : false, 
      mangle: DEBUG ? false : {screw_ie8 : true, keep_fnames: true}, 
      dead_code: DEBUG ? false : true, 
      unused: DEBUG ? false : true, 
      deadCode: DEBUG ? false : true, 
      comments: DEBUG ? true : false, 
      compress: { 
       screw_ie8: true, 
       keep_fnames: true, 
       drop_debugger: false, 
       dead_code: false, 
       unused: false, 
       warnings: DEBUG ? true : false 
      } 
     }),*/ 
    ] 
}; 

N вл index.html должны быть скорректированы немного:

<!DOCTYPE html> 
<html> 
    <head> 
    <title><%- htmlWebpackPlugin.options.title %></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <base href="<%- htmlWebpackPlugin.options.baseUrl %>"> 
    <!-- imported CSS are concatenated and added automatically --> 
    </head> 
    <body aurelia-app="main"> 
    <div class="splash"> 
     <div class="message"><%- htmlWebpackPlugin.options.title %></div> 
     <i class="fa fa-spinner fa-spin"></i> 
    </div> 
    <% if (webpackConfig.debug) { %> 
    <!-- Webpack Dev Server reload --> 
    <script src="/webpack-dev-server.js"></script> 
    <% } %> 
    </body> 
</html> 

После этих шагов, вы можете сделать нормальный npm install и запустить npm start.

Надеюсь, это поможет кому-то, кто хочет использовать стандарт webpack вместо @ easy-webpack.