在angularJS应用上使用lite-server设置webpack

Question

我是webpack的新手，我正在尝试在angularJS应用程序上通过lite-server热重载来设置webpack。

我将逐步解释到目前为止的工作，您可能会进行故障排除。

所以我创建了package.json，它是：

{
  "name": "app",
  "version": "2.0.0",
  "description": "front",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "lite-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.9",
    "angular-route": "^1.6.9",
    "webpack": "^4.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "lite-server": "^2.3.0"
  }
}

然后在根文件夹中添加了webpack.config.js

//webpack.config.js
module.exports = {
    entry: './src/app.js',
    output: {
        path: './src/bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            { test: /\.html$/, loader: "html" },
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    devtool: "#inline-source-map"
}

然后我在根文件夹中添加了.babelrc文件

{ "presets": [ "es2015" ] }

最后两步，我在根目录中创建了src文件夹，其中包含2个文件-app.js和index.html

(function () {
    'use strict';

    import angular from 'angular';

    angular
        .module('app')
        .config(configure);

    configure.$inject = []; // some providers 'll be injected in here

    function configure() {
        console.log('config run');
    }

})();

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body data-ng-app="app">
        <!-- files 'll be built in here -->
        <script src="bin/app.bundle.js"></script>
    </body>
</html>

这就是代码的全部内容，文件结构如下所示：

bin文件夹为空。 我运行npm start脚本，它实际上是在启动此精简服务器，但会引发错误404

18.04.01 14:31:23 404 GET /index.html

我希望我的webpack编译当前所需的所有文件并创建此包，然后将其加载到index.html中。 我在这里做错了什么？

Answer 1

在package.json文件的“启动”脚本下，仅使用默认设置启动lite-server。 因此，我相信您根本不会启动Webpack，因此这些工件永远不会构建到bin文件夹中。

不过，只是警告，您不能执行以下操作：

"start": "lite-server && webpack"

因为webpack仍然无法运行。 为什么？ 因为webpack仅在lite-server执行完毕后才能运行，在这种情况下，它将永远无法完成。 也许给https://www.npmjs.com/package/npm-run-all尝试同时运行两者。

在angularJS应用上使用lite-server设置webpack

问题描述

1 个解决方案

解决方案1
0 2018-04-01 13:47:54

在angularJS应用上使用lite-server设置webpack

问题描述

1 个解决方案

解决方案1 0 2018-04-01 13:47:54

解决方案1
0 2018-04-01 13:47:54