webpack中的那些坑

時間 2019-11-08

標籤 webpack 那些简体版

原文原文鏈接

以前在簡書上看到一個webpack入門（入門Webpack，看這篇就夠了），講得確實很清楚，可是由於博主用的是1.x的版本，和如今廣泛默認安裝的2.x版本有一些細節上的差距，因此實際使用的時候就會遇到一些坑，對於想入門的小白如我，形成了不小的困擾。因而，乾脆整理了一下我遇到的各類報錯，以備所需。css

一 loader

webpack 2.0以後，不能省略後綴-loadernode

二 postcss和autoprefixer配置

最開始直接把postcss寫在module.exports的配置裏，報錯webpack

//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裏面。報錯信息如圖web

因而將postcss部分更改成json

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

這時問題又來了，報錯，提示語法錯誤，webpack沒有被定義瀏覽器

要解決這個問題，須要在整個webpack.config.js配置文件頭部定義webpackbabel

var webpack = require('webpack');

最終的配置文件以下，此時能夠正常運行webpack，看到css中被自動根據瀏覽器添加了前綴，autoprefixer調用成功app

//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插件
                  ],
            }
        })
    ]

}