Webpack 3.11-ExtractTextPlugin-您可能需要一个适当的加载器来处理此文件类型-意外的令牌

Question

我喜欢错误信息，它们很有帮助（反语关闭）

错误消息：

webpack哈希：9ff6bc2b8b3cb641bb93版本：webpack 3.11.0时间：483ms资产大小块块名称bundle.js 2.83 kB 0[发出]主bundle.js.map 2.45 kB 0[发出]主索引.html 188字节[发出][0]./src/index.ts 320字节{0}[生成][失败][1错误]

./src/index.ts模块分析失败中的错误：意外标记（50：44）您可能需要适当的加载程序来处理此文件类型。setTimeout（（）=>{getComponent（）.Then（component=>{
Document.Body.AppendChild（作为HTMLDivElement的组件）；
}）.Catch（(e)=>{console.log(e)；Child html-webpack-plugin for“index.html”：1 asset 2（webpack）/buildin/global.js 509字节{0}[build][3]（webpack）/buildin/module.js 517字节{0}[build]+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
  ]
};

packages.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"
    ]
  }
}

Answer 1

使用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"