Li RUONAN


一枚行走在前端道路上的程序媛 ~~


Webpack4.x

今天写代码没有考虑版本,直接 npm install webpack 之后,发现webpack最近又update 了,并且4.x更新了很多语法,于是开启了填坑之旅。哈哈~~

1
2
3
4
5
6
7
8
9
10
11
"devDependencies": {
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"ts-loader": "^4.3.1",
"typescript": "^2.9.1",
"vue": "^2.5.16",
"vue-loader": "^15.2.4",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.11.1",
"webpack-cli": "^3.0.3"
}

先来总结几个坑吧:

  1. webpack4.x安装的时候会提示你 npm install -D webpack-cli。好吧,4.x中把 webpack-cli 从webpack包里面分离出来了,所以需要自己手动安装!这个看到提示继续安装就好啦~
  2. mode: 以前的版本并没有显式要求必须声明 mode: ‘development’ or mode: ‘production’。好吧,4.x中会提示warning 要求配置。那么在 webpack.config.js 配置好即可~
  3. 遇到的一个神坑 – VueLoaderPlugin。基于 webpack4.x + vue2.x 创建工程的时候,始终编译不通过.vue文件,研究了很久,loader都加载成功了,语法也没有问题,但是一直提示 You may need an appropriate loader to handle this file type. 于是猜测是不是版本的问题,发现 webpack4.x 对于 vue-loader-plugin 有一些兼容性问题,比如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    if (compiler.hooks) {
    // webpack 4
    compiler.hooks.compilation.tap(id, compilation => {
    compilation.hooks.normalModuleLoader.tap(id, loaderContext => {
    loaderContext[NS] = true
    })
    })
    } else {
    // webpack < 4
    compiler.plugin('compilation', compilation => {
    compilation.plugin('normal-module-loader', loaderContext => {
    loaderContext[NS] = true
    })
    })
    }

    于是找到了解决办法,在 webpack.config.js 文件中引入 VueLoaderPlugin = require(‘vue-loader/lib/plugin’);同时,在 plugins 添加实例化VueLoaderPlugin的配置:

    1
    2
    3
    plugins: [ 
    new VueLoaderPlugin()
    ],
  1. 这是个老生常谈的问题,倒也不是webpack4.x的问题,只是今天遇到了就一起记录下。在编译.vue文件时候,style标签里的css样式不识别,原因其实就是 css-loader 和 style-loader 的原因啦,所以,在 webpack.config.js 文件中配置:

    1
    2
    3
    4
    {
    test: /\.css$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
    },

    这里主要是想要强调一下,这两个loader的顺序,一定不能放错咯!