webpack中的那些坑

最新推荐文章于 2025-08-18 17:38:50 发布

weixin_34187822

最新推荐文章于 2025-08-18 17:38:50 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json ViewUI

原文链接：https://segmentfault.com/a/1190000009504379

本文针对Webpack 2.x版本，详细解析了loader配置、postcss及autoprefixer配置、uglify插件使用过程中常见的问题及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前在简书上看到一个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里面。报错信息如图

于是将postcss部分更改为

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

这时问题又来了，报错，提示语法错误，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

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

new webpack.optimize.UglifyJsPlugin(),