配置webpack.config.js遇到的一些问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yilanyoumeng3/article/details/82055256

1. 配置vue-loader时候，npm run build 遇到这样问题，如下提示：

webpack vue-loader was used without the corresponding 
plugin. Make sure to include VueLoaderPlugin

解决方案是：

const path = require('path')
//引入这个
const VueLoaderPlugin = require('vue-loader/lib/plugin')

然后在moudle.exports 的plugin加上plugin配置
module.exports = {
  entry: path.join(__dirname, './src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  },
  plugins: [
  // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
          'css-loader',
          'style-loader'
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(gif|jpg|jpeg|png|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 1024,
              name: '[name]-aaa.[ext]'
            }
          }
        ]
      }
    ]
  }
}

1. css-loader 问题，提示代码：

ERROR in ./src/assets/styles/test.css
Module build failed: Unknown word (5:1)
```![这里写图片描述](https://img-blog.csdn.net/20180825205612213?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbGFueW91bWVuZzM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

解决方案如下：





<div class="se-preview-section-delimiter"></div>

{
test: /.css$/,
loader: ‘style-loader!css-loader’
}
“`

 {
   test: /\.css$/,
   loader: 'style-loader!css-loader'
 }

1. 安装stylus-loader 之后，npm run build 遇到问题

ERROR in ./node_modules/css-loader!./src/assets/styles/test-stylus.styl
Module build failed: Unknown word (1:1)

解决方案：

{
        test: /\.styl$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'stylus-loader'
        ]
      }