Question

webpack 3.5.5，更少的3.8.1，更少的加载器4.1.0，angularjs 1.6.9

我正在尝试建立一个捆绑包。一切正常，直到我在angularjs组件之一中导入更少的文件为止。

import '../styles/angular-json-tree.less';

较少文件内容：

.json-tree-out {
  overflow-y: scroll;
  padding: 1em;
  font-size: 14px;
}

Webpack配置，其中规则中的装载程序较少：

/* global __dirname, module, require */
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      _: 'lodash',
    }),
    // new webpack.optimize.UglifyJsPlugin(), // uncomment this property to enable minimization
  ],
  entry: {
    app: ['babel-polyfill', './public/app/app.js'],
  },
  output: {
    path: __dirname + '/public/dist/',
    publicPath: '/public/dist/',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['env'],
        },
        exclude: /(node_modules|lib|server|test|migrations|seeds)/,
      },
      {
        test: /\.less$/,
        loader: 'less-loader', // compiles Less to CSS
        options: {
          javascriptEnabled: true
        }
      },
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'postcss', 'sass'],
        exclude: /node_modules/,
      },
      {
        test: /\.(ttf|eot|svg|gif|png|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, // https://www.npmjs.com/package/font-awesome-webpack#usage
        loader: 'url-loader?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude: /node_modules/,
      },
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader?$!expose-loader?jQuery',
      },
    ],
  },
  node: {
    'fs': 'empty',
    'net': 'empty',
    'tls': 'empty',
    'dns': 'empty',
    'boom': 'empty',
    'hapi': 'empty',
    'inert': 'empty',
    'joi': 'empty',
    'knex': 'empty',
    'mysql': 'empty',
    'hapi-auth-jwt': 'empty',
  },
  resolve: {
    alias: {},
    extensions: ['.js', '.json'],
    modules: [
      'node_modules',
      'lib',
    ],
  },
};

我得到的错误：

ERROR in ./public/app/search/call-detail/call-detail-logs/styles/angular-json-tree.less
Module parse failed: /media/trex/safe1/Development/qxip/homer-app/node_modules/less-loader/dist/cjs.js??ref--1!/media/trex/safe1/Development/qxip/homer-app/public/app/search/call-detail/call-detail-logs/styles/angular-json-tree.less Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| /* Page Styling */
| .json-tree-out {
|   left: 52%;
|   right: 2%;
 @ ./public/app/search/call-detail/call-detail-logs/controllers/call-detail-logs.controller.js 9:0-43
 @ ./public/app/search/call-detail/call-detail-logs/call-detail-logs.component.js
 @ ./public/app/search/call-detail/call-detail-logs/index.js
 @ ./public/app/search/call-detail/index.js
 @ ./public/app/search/index.js
 @ ./public/app/app.module.js
 @ ./public/app/app.js
 @ multi babel-polyfill ./public/app/app.js

我在Webpack配置中会错过什么？

Answer 1

official documentation说要编写规则来加载较少的文件，例如：

rules: [{
  test: /\.less$/,
  use: [{
    loader: 'style-loader' // creates style nodes from JS strings
  }, {
    loader: 'css-loader' // translates CSS into CommonJS
  }, {
    loader: 'less-loader' // compiles Less to CSS
  }]
}]

请注意，这实际上是使用3个加载程序的一条规则。当然，您还需要安装所有装载程序以使此工作（style-loader和css-loader）

由于较少的加载程序错误，无法捆绑较少的文件

1 个答案: