Question

我在Webpack 2使用ExtractTexWebpacktPlugin时遇到了麻烦。我的 webpack配置文件：

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

console.log( "==============================DEVELOPMENT================================" );

module.exports = {
  entry: {
    app: [ "./src/main.ts" ]
  },

  output: {
    path: path.resolve( __dirname, "build" ),
    publicPath: "http://localhost:8000/build",
    filename: "bundle.js"
  },

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

  stats: "verbose",

  module: {

    rules: [
      {
        test: /\.ts$/,
        loaders: [ 'awesome-typescript-loader' ],
        exclude: [ /\.(spec)\.ts$/, /(node_modules)/ ]
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
        }],
      },
      /*{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },*/
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          use: ['css-loader', 'less-loader']
        })
      }
    ]

  },

  plugins: [
    new ExtractTextPlugin( { filename: '[name].css' } )
  ],

  devServer: {
    port: 8000,
    contentBase: "./src",
    compress: true
  },

  devtool: "inline-source-map"
};

修改我已将style.less简化为仅1条规则：

h1 {
  color: #0F9E5E;
}

此时错误显示如下：Uncaught SyntaxError: Unexpected token {

所有内容似乎都是标准的简单配置，后面是Webpack文档。这是 main.ts 文件，我导入app.less：

import './assets/less/style.less';

import * as $ from 'jquery';

let h1 = $('h1');    
console.log( h1 );

作为输出我得到Uncaught SyntaxError: Unexpected token . - .，因为它是转换后的css文件中的第一个符号。显然，它没有正确地解析css。

插件版本：

"webpack": "2.2.1",
"style-loader": "0.13.1",
"css-loader": "0.25.0",
"extract-text-webpack-plugin": "^2.1.0",

已编辑 - 登录终端：

[at-loader] Checking started in a separate process...
[at-loader] Ok, 0.073 sec.
Hash: c988ce477e8a4adc8c3d
Version: webpack 2.2.1
Time: 2633ms
    Asset       Size  Chunks                    Chunk Names
bundle.js     709 kB       0  [emitted]  [big]  app
  app.css  204 bytes       0  [emitted]         app
chunk    {0} bundle.js, app.css (app) 234 kB [entry] [rendered]
   [34] ./src/main.ts 286 bytes {0} [built]
   [35] (webpack)-dev-server/client?http://localhost:8000 3.97 kB {0} [built]
   [36] (webpack)/hot/dev-server.js 1.57 kB {0} [built]
   [39] ./~/events/events.js 8.33 kB {0} [built]
   [40] ./src/assets/less/style.less 41 bytes {0} [built]
   [42] ./~/punycode/punycode.js 14.7 kB {0} [built]
   [45] ./~/querystring-es3/index.js 127 bytes {0} [built]
   [48] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
   [74] ./~/strip-ansi/index.js 161 bytes {0} [built]
   [76] ./~/url/url.js 23.3 kB {0} [built]
   [77] ./~/url/util.js 314 bytes {0} [built]
   [78] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
   [80] (webpack)/hot/emitter.js 77 bytes {0} [built]
   [81] (webpack)/hot/log-apply-result.js 1.02 kB {0} [built]
   [82] multi (webpack)-dev-server/client?http://localhost:8000 webpack/hot/dev-server ./src/main.ts 52 bytes {0} [built]
     + 68 hidden modules
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 1.69 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [1] ./~/css-loader!./~/less-loader!./src/assets/less/style.less 188 bytes {0} [built]
webpack: Compiled successfully.
webpack: Compiling...

[at-loader] Checking started in a separate process...

[at-loader] Ok, 0.042 sec.
Hash: 5adacfaa8847a8e309ca
Version: webpack 2.2.1
Time: 378ms
                               Asset       Size  Chunks                    Chunk Names
                           bundle.js     709 kB       0  [emitted]  [big]  app
0.c988ce477e8a4adc8c3d.hot-update.js    1.11 kB       0  [emitted]         app
c988ce477e8a4adc8c3d.hot-update.json   43 bytes          [emitted]         
                             app.css  204 bytes       0  [emitted]         app
chunk    {0} bundle.js, 0.c988ce477e8a4adc8c3d.hot-update.js, app.css (app) 234 kB [entry] [rendered]
   [34] ./src/main.ts 286 bytes {0} [built]
     + 82 hidden modules
webpack: Compiled successfully.

Answer 1

你应该这样做：

 plugins: [
    new ExtractTextPlugin( { filename: '[name].css' } )
  ],

因为提取文本插件现在需要一个对象。

这是example。

Webpack 2 + ExtractTexWebpacktPlugin =意外的令牌

1 个答案: