webpack中的那些坑

marek 发布于2019-08-20 16:43 / 2210人阅读

摘要：之前在简书上看到一个入门入门，看这篇就够了，讲得确实很清楚，但是因为博主用的是的版本，和现在普遍默认安装的版本有一些细节上的差距，所以实际使用的时候就会遇到一些坑，对于想入门的小白如我，造成了不小的困扰。

之前在简书上看到一个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(),

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83112.html

对服务端渲染的一次实践(带你掌握服务端渲染)

摘要：之前做的一个应用，最近把首页改成了服务端渲染的形式，过程还是很周折的，踩到了不少坑，记录一些重点，希望有所帮助前端使用的技术栈升级到升级到服务项目地址喜欢的给个，感谢。。。。。。。之前react做的一个应用，最近把首页改成了服务端渲染的形式，过程还是很周折的，踩到了不少坑，记录一些重点，希望有所帮助前端使用的技术栈 react、react-dom 升级到 v16 react-ro...

v1 2019-08-22 13:48 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

yearsj 2019-08-01 17:18 评论0 收藏0
浅谈NUXT - 基于vue.js的服务端渲染框架

摘要：是一款基于的服务端渲染框架，跟的异曲同工。该配置项用于定义应用客户端和服务端的环境变量。 Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使...

godiscoder 2019-08-20 18:29 评论0 收藏0
webpack组织模块的原理 - 打包Library

摘要：所以你编译后的文件实际上应当只输出，这就需要在配置里用来控制这样上面的模块加载函数会在返回值后面加一个，这样就只返回的部分。之前一篇文章分析了Webpack打包JS模块的基本原理，所介绍的案例是最常见的一种情况，即多个JS模块和一个入口模块，打包成一个bundle文件，可以直接被浏览器或者其它JavaScript引擎执行，相当于直接编译生成一个完整的可执行的文件。不过还有一种很常见的...

legendmohe 2019-08-22 15:15 评论0 收藏0
2017个人总结

摘要：特此写个流水账总结，供自己以后羞耻的回顾。正逢月计划辞职回家玩游戏过个暑假，结果在如今部门老大的忽悠下加入到了新东家。和组长两人继续没昼夜的忙活，最终也按时交差，上了线。卷土重来，回报过去的一份念旧，期待的美好，个人选型入坑。前言 2017年发生了太多的事情，结了婚，住进了新家，成功的播了种，当上了准爸爸。公司也蒸蒸日上搬进了高大上的写字楼。前端的坑越来越大，都来不及填。特此写个流水...

Jason 2019-08-22 13:49 评论0 收藏0