Question

我喜欢错误信息，它们非常有用（反讽）

错误-消息：

webpack哈希：9ff6bc2b8b3cb641bb93版本：webpack 3.11.0时间：483ms           资产大小块大块名称       bundle.js 2.83 kB 0 [emit] main bundle.js.map 2.45 kB 0 [emit] main index.html 188 bytes [emit] [0] ./src/index.ts 320 bytes {0} [built] [failed ] [1   错误]
      ./src/index.ts中的错误模块解析失败：意外的令牌（50:44）   您可能需要适当的加载程序来处理此文件类型。 |   setTimeout（（）=＆gt; {| getComponent（）。then（component =＆gt; {|
  document.body.appendChild（组件为HTMLDivElement）; |
  }）。catch（（e）=＆gt; {| console.log（e）; Child html-webpack-plugin   for＆＃34; index.html＆＃34;：        1资产          2（webpack）/buildin/global.js 509字节{0} [已建]          [3]（webpack）/buildin/module.js 517字节{0} [已建]           + 2个隐藏的模块

webpack.config.js，示例代码from 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文件：

<强> Index.ts

   import "./css/style.css"
   import "./css/test.less"

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

1 个答案: