Блог

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

Есть идеи, как правильно настроить минимальный webpack aurelia babel?

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

Обновление 9-ноябрь-2016: для лучшей версии этого решения см. Это или это.

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

После загрузки 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=100000amp;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
            }
        }),*/
    ]
};
  

Теперь 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.