webpack中的那些坑

之前在简书上看到一个webpack入门(入门Webpack,看这篇就够了),讲得确实很清楚,但是因为博主用的是1.x的版本,和现在普遍默认安装的2.x版本有一些细节上的差距,所以实际使用的时候就会遇到一些坑,对于想入门的小白如我,造成了不小的困扰。于是,干脆整理了一下我遇到的各种报错,以备所需。

一 loader

webpack 2.0之后,不能省略后缀-loader

二 postcss和autoprefixer配置

最开始直接把postcss写在module.exports的配置里,报错

//webpack配置文件
module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/app/main.js",
  output: {...},

  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules!postcss-loader'
      }
    ]
  },

  postcss: [
    require('autoprefixer')//调用autoprefixer插件
  ],

  devServer: {...}
}

因为webpack 2.0之后,不允许用户直接修改配置文件,需要把postcss写入到plugins里面。报错信息如图

webpack中的那些坑

于是将postcss部分更改为

plugins:[
        new webpack.LoaderOptionsPlugin({
            options:{
                 postcss: [
                    require('autoprefixer')//调用autoprefixer插件
                  ],
            }
        })
    ]

这时问题又来了,报错,提示语法错误,webpack没有被定义

webpack中的那些坑

要解决这个问题,需要在整个webpack.config.js配置文件头部定义webpack

var webpack = require('webpack');

最终的配置文件如下,此时可以正常运行webpack,看到css中被自动根据浏览器添加了前缀,autoprefixer调用成功

//webpack配置文件
var webpack = require('webpack');

module.exports = {
    /*devtool: 'eval-source-map',*/

    entry: __dirname + '/app/main.js',

    output:{
        path: __dirname + '/public',
        filename: 'bundle.js'
    },

    module:{
        loaders:[
            {
                test: /\.json$/,
                loader: "json-loader"
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader:"babel-loader"

            },
            {
                test: /\.css$/,
                loader:"style-loader!css-loader?modules!postcss-loader"//增加modules之后,就会把css的类名传递到组件的代码中,不用担心在不同模块中具有相同类名可能造成的问题
            }
        ]

    },

    devServer:{
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
    },

    plugins:[
        new webpack.LoaderOptionsPlugin({
            options:{
                 postcss: [
                    require('autoprefixer')//调用autoprefixer插件
                  ],
            }
        })
    ]

}

三 uglify插件

提示uglifyJsPlugin is not a constructor
webpack中的那些坑

其实只要注意大小写即可。uglify的u要大写。
正确写法:

new webpack.optimize.UglifyJsPlugin(),

相关推荐