0

我喜欢错误消息，它们非常有帮助（讽刺）

在此处输入图像描述

错误信息：

webpack 哈希：9ff6bc2b8b3cb641bb93 版本：webpack 3.11.0 时间：483ms 资产大小块块名称 bundle.js 2.83 kB 0 [emitted] main bundle.js.map 2.45 kB 0 [emitted] main index.html 188 bytes [emitted] [0 ] ./src/index.ts 320 字节 {0} [构建] [失败] [1 错误]

./src/index.ts 中的错误模块解析失败：意外令牌 (50:44) 您可能需要适当的加载程序来处理此文件类型。| setTimeout(() => { | getComponent().then(component => { |
document.body.appendChild(component as HTMLDivElement); |
}).catch((e) => { | console.log(e); “index.html”的子 html-webpack-plugin：1 资产 2 (webpack)/buildin/global.js 509 字节 {0} [built] [3] (webpack)/buildin/module.js 517 字节 {0} [内置] + 2个隐藏模块

webpack.config.js，示例代码取自webpack.js.org v3.11

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// Create multiple instances
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
      },
      {
        test: /\.less$/i,
        use: extractLESS.extract([ 'css-loader', 'less-loader' ])
      },
    ]
  },
  plugins: [
    extractCSS,
    extractLESS
  ]
};

包.json

  "dependencies": {
    "@types/extract-text-webpack-plugin": "^3.0.1",
    "@types/html-webpack-plugin": "^2.30.2",
    "@types/node": "^9.4.5",
    "@types/source-map": "^0.5.2"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.0",
    "@types/lodash": "^4.14.102",
    "@types/webpack": "^3.8.7",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.3.1",
    "less": "^3.0.0",
    "less-loader": "^4.0.5",
    "lodash": "^4.17.5",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "webpack": "^3.11.0"
  },

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "rootDir": "src",
    "sourceMap": true,
    "lib": [    
      "dom",
      "es5",
      "scripthost",
      "es2015.promise"
    ]
  }
}
4

1 回答 1

0

适用于 Webpack v3.11

我对 进行了一些更改webpack.config.js，请看下面：

const {
    join
} = require('path')


const webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin")

const extractLESS = new ExtractTextPlugin({
    filename: 'stylesheets/[name]-two.css',
    disable: false,
    allChunks: true
});
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');

module.exports = {

    devtool: 'inline-source-map',

    entry: join(__dirname, 'src/index'),

    plugins: [
        extractCSS,
        extractLESS 
    ],

    devtool: "source-map",

    output: {
        path: join(__dirname, 'dist'),
        filename: 'bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: "/dist/",
        devtoolModuleFilenameTemplate: '[absolute-resource-path]'
    },

    resolve: {
        extensions: ['.ts', '.js', '.json', '.css', '.less']
    },

    module: {
        rules: [{
                test: /\.css$/,
                use: extractCSS.extract({
                    fallback: 'style-loader',
                    use: ['css-loader']
                })
            }, {
                test: /\.less$/i,
                use: extractLESS.extract(['css-loader', 'less-loader'])
            },
            {
                test: /\.ts$/,
                loaders: ['ts-loader']
            }             
        ],

    }
}

在我的 index.ts 文件中，我引用了我的 less/css 文件：

索引.ts

   import "./css/style.css"
   import "./css/test.less"
于 2018-02-15T00:35:28.380 回答