查看css-loader和style-loader对应 webpack版本

因为初学，问题太多，不断困扰着我，所以笔记多，而且初级，主要为了记录自己遇到的问题

今天问题：安装webpack3.6.0 安装css-loader和style-loader，我轻易认为会根据我本地项目的webpack版本，自动选择安装对应的css-loader和style-loader版本，

webpack.config.js如下

1.  
   /* 1、这个文件名是固定的，文件是自建的，建它的目的是在终端不再需要输入webpack ./src/main.js ./dist/bundle.js 而是直接输入webpack就可以自动生成。
2.  
   2、实际上一般也不用webpack这个命令，而是用npm run build命令，所以需要到 生成的package.json文件作映射,如下
3.  
   npm run build 映射到 “build”，并且首先是寻找本项目下webpack版本，没有才去全局webpack。
4.  
   3、在HBuilder终端或cmd命令窗口中执行webpack命令都是全局webpack。
5.  
   4、安装本项目的webpack：进入项目目录下执行: npm install webpack@3.6.0 --save-dev
6.  
   5、要想在【终端】执行本项目下webpack 要先进入本地webpack目录下 ./node_modules/.bin/webpack
7.  
   "scripts": {
8.  
   "test": "echo \"Error: no test specified\" && exit 1",
9.  
   "build": "webpack",
10.  
    },
11.  
     
12.  
    */
13.  
     
14.  
    /** 获取绝对路径，需要依赖node中的path包。项目中肯定是要依赖node包，我们必须初始化操作，生成package.json来--管理包的信息文件
15.  
    1、在终端（当前项目目录下）初始化：npm init
16.  
    1.1 package name:(02-webpack项目) 询问是否以此为项目名，不能有中文。自定名：vuewebpack
17.  
    1.2 entry point:(webpack.config.js) index.js 一般是这个名
18.  
    1.3 test command:
19.  
    1.4 git repository:
20.  
    1.8 Is this OK?(yew):
21.  
    回车-回车多次后，生成package.json
22.  
    */
23.  
    const path = require('path')
24.  
    module.exports = {
25.  
    entry: './src/main.js', // 入口文件
26.  
    output: { // 出口文件
27.  
    /* 1、要求绝对路径，不可以是相对路径如：./dist
28.  
    path: './dist', 要动态获取文件路径.
29.  
    2、 __dirname:获取当前项目的绝对路径，再和dist拼接成，最终目录
30.  
    */
31.  
    path: path.resolve(__dirname, 'dist'),
32.  
    filename: 'bundle.js'
33.  
    },
34.  
     
35.  
    // entry: path.join(__dirname, './src/main.js'),
36.  
    // output: {
37.  
    // path: path.join(__dirname, './dist'), // 输出文件的存放路径
38.  
    // filename: 'bundle.js' // 输出文件的名称
39.  
    // },
40.  
    module: {
41.  
    rules: [
42.  
    {
43.  
    test: /\.css$/,
44.  
    // 注意：webpack是从右向左执行，先解析css再style将其加入DOM中
45.  
    use: ['style-loader', 'css-loader']
46.  
    }
47.  
    ],
48.  
    }
49.  
     
50.  
    }

结果一构建出错，提示：如下

Module build failed :TypeError: this.getOptions is not a function at Object.loader

以后要经常遇到这类问题，怎么办？难道官方没有版本说明 ，查一下，在github上有说明

1、看图

这篇好文章是转载于：学新通技术网