Question

我想设置支持Aurelia和Babel（适用于ES2016）的最小 webpack配置。我想使用 easy-webpack 来实现没有（来自aurelia的官方骨架取决于 easy-webpack 但我想使用平原的WebPack）。

知道如何正确设置最小的webpack + aurelia + babel吗？

Answer 1

2017年6月6日更新：这里提到的步骤已经过时且不相关，因为官方框架已经删除了对easy-webpack的依赖。我只是出于历史原因而保留这一点。

2016年11月9日更新：要获得此解决方案的更佳版本，请参阅this或this。

好的，这是基于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=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
            }
        }),*/
    ]
};

现在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的人。

Aurelia的最小webpack设置，没有easy-webpack

1 个答案: