Question

我想使用与webpack 4捆绑在一起的angularjs启动应用程序。我从控制台获得了输出：

您可能需要适当的加载程序来处理此文件类型

我的配置如下：

package.json

 "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "@types/node": "^11.11.3",
    "@webpack-cli/init": "^0.1.5",
    "babel-loader": "^8.0.4",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^1.0.1"**,
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "ts-loader": "^5.3.3",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"

webpack.dev.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {
  prodPath,
  srcPath
} = require('./path');

const sassPreprocessor = {  
  fileRegexp: /\.(sass|scss|css)$/,
  loaderName: 'sass-loader'
}

module.exports = {
  entry: {
      main: `./${srcPath}/index.ts`
  },
  resolve: {
      extensions: [".ts", ".js"]
  },
  output: {
      path: path.join(__dirname, prodPath),
      filename: '[name].[chunkhash].js'
  },
  devtool: 'source-map',
  devServer: {
      open: true
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: [/node_modules/]
      },
      {
        test: sassPreprocessor.fileRegexp,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          }, 
          {
          loader: 'css-loader',
            options: {
              modules: false,
              sourceMap: true
            }
          },
          {
            loader: sassPreprocessor.loaderName,
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      hash: false,
      template: `./${srcPath}/index.html`,
      filename: 'index.html'
    })
  ]
};

path.js

const prodPath = '../dist';
const srcPath = 'app';

module.exports = {
  prodPath,
  srcPath
}

webpack.config.js

const env = process.env.NODE_ENV;

module.exports = env => {
    console.log(`️  running ${env} Mode using ./webpack/webpack.${env}.js ️`);
    return require(`./webpack/webpack.${env}.js`);
}

index.ts

import { TodoAppModule } from './src/todo-app.module';
import './styles/main.scss';

export {
    TodoAppModule
}

todo-app.module.ts

import * as angular from 'angular';
import { TodoListComponent } from './todo/todo-list.component';


export const TodoAppModule = angular.module('todoApp', [])
    .component('todoList', TodoListComponent);

在 index.html 中，我使用以下命令注入捆绑的代码：
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
和样式使用命令：
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>"

有人可以帮助我解决这个问题吗？我试图阅读官方Webpack页面上的一些配置文档，但这对我不起作用。我已经看到了一些使用angularjs和webpack进行配置的示例，但是这些解决方案在这里不起作用。如果有一些关于Webpack配置的有趣文章，我将感到高兴

错误消息：

ERROR in ./app/src/todo/todo-list.component.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. <div> 123 </div> @ ./app/src/todo/todo-list.component.ts 3:28-65 @ ./app/src/todo-app.module.ts @ ./app/index.ts @ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.ts

todo-list.component.html

<div> 123 </div>

Webpack4配置与html loader的angularJS问题

0 个答案: