webpack中的那些坑

marek 發布于2019-08-20 16:43 / 2233人閱讀

摘要：之前在簡書上看到一個入門入門，看這篇就夠了，講得確實很清楚，但是因為博主用的是的版本，和現在普遍默認安裝的版本有一些細節上的差距，所以實際使用的時候就會遇到一些坑，對于想入門的小白如我，造成了不小的困擾。

之前在簡書上看到一個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"http://增加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(),

GPU云服務器云服務器 -坑 cdn坑 php坑架構之坑系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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