webpack 中使用 autoprefixer

webpack中autoprefixer是配合postcss-loader使用的，首先安裝相應資源：

npm i -D style-loader css-loader postcss-loader autoprefixer

在webpack.config.js中

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'postcss-loader',
          'stylus-loader'
        ]
      }
    ]
  }
}

在postcss.config.js中

module.exports = {
  "plugins": [
    require('autoprefixer')({
      browsers: [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    })
  ]
}

注意：

 

 也可以不要postcss.config.js文件：

 

 

webpack4中使用autoprefixer失效的問題

Lofan93 2019-08-05 00:58:51  1949  收藏 2
分類專欄： Webpack 文章標簽： autoprefixer失效
版權
要用 autoprefixer 需要借助postcss-loader

--save-dev 縮寫是 -D

安裝命令：
npm install webpack style-loader css-loader postcss-loader autoprefixer -D

如果 webpack style-loader css-loader 都安裝過，就直接：
npm install postcss-loader autoprefixer -D


webpack.config.js 文件里加如下配置：


{
  test:/\.css$/,
  use: [
  	{loader:'style-loader'},
  	// {loader:'css-loader',
  	// options:{
  	//	 modules:true,
  	//	 importLoaders:1	   
  	//  }
  	// },
  	{loader:'css-loader'},
  	{loader:'postcss-loader'}
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
根目錄新建 postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
1
2
3
4
5
以上正常步驟設置完，你以為就可以正常出效果了？天真，咱還要設置支持的瀏覽器，不然沒效果。


package.json 里 ( 與 devDependencies 同級 ) ，設置支持哪些瀏覽器，必須設置支持的瀏覽器才會自動添加瀏覽器兼容
"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]
1
2
3
4
5
6
7
8
當然，你也可以直接在postcss.config.js文件里設置瀏覽器支持，比如這樣，也是能成功給css屬性加上前綴：

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: ['Android >= 4.0', 'iOS >= 7']
    })
  ]
}
1
2
3
4
5
6
7
但是當你運行npx webpack去打包的時候，npm會提示你如下信息：

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config 
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist
1
2
3
4
5
6
7
8
9
10
11
讓咱在package.json里添加browserslist這個key的配置，或者新建個.browserslistrc的文件，用這樣的方式代替autoprefixer的browsers配置項。算是優化項，不這樣搞也不會報錯。
————————————————
版權聲明：本文為CSDN博主「Lofan93」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u011019468/java/article/details/98412416

　　

webpack4中使用autoprefixer失效的問題
Lofan93 2019-08-05 00:58:51  1949  收藏 2分類專欄： Webpack 文章標簽： autoprefixer失效版權要用 autoprefixer 需要借助postcss-loader
--save-dev 縮寫是 -D
安裝命令：npm install webpack style-loader css-loader postcss-loader autoprefixer -D
如果 webpack style-loader css-loader 都安裝過，就直接：npm install postcss-loader autoprefixer -D

webpack.config.js 文件里加如下配置：

{  test:/\.css$/,  use: [  {loader:'style-loader'},  // {loader:'css-loader',  // options:{  // modules:true,  // importLoaders:1     //  }  // },  {loader:'css-loader'},  {loader:'postcss-loader'}  ]}123456789101112131415根目錄新建 postcss.config.js文件
module.exports = {  plugins: [    require('autoprefixer')  ]}12345以上正常步驟設置完，你以為就可以正常出效果了？天真，咱還要設置支持的瀏覽器，不然沒效果。

package.json 里 ( 與 devDependencies 同級 ) ，設置支持哪些瀏覽器，必須設置支持的瀏覽器才會自動添加瀏覽器兼容"browserslist": [    "defaults",    "not ie <= 8",    "last 2 versions",    "> 1%",    "iOS >= 7",    "Android >= 4.0"  ]12345678當然，你也可以直接在postcss.config.js文件里設置瀏覽器支持，比如這樣，也是能成功給css屬性加上前綴：
module.exports = {  plugins: [    require('autoprefixer')({      browsers: ['Android >= 4.0', 'iOS >= 7']    })  ]}1234567但是當你運行npx webpack去打包的時候，npm會提示你如下信息：
Replace Autoprefixer browsers option to Browserslist config.  Use browserslist key in package.json or .browserslistrc file.
  Using browsers option cause some error. Browserslist config   can be used for Babel, Autoprefixer, postcss-normalize and other tools.
  If you really need to use option, rename it to overrideBrowserslist.
  Learn more at:  https://github.com/browserslist/browserslist#readme  https://twitter.com/browserslist1234567891011讓咱在package.json里添加browserslist這個key的配置，或者新建個.browserslistrc的文件，用這樣的方式代替autoprefixer的browsers配置項。算是優化項，不這樣搞也不會報錯。————————————————版權聲明：本文為CSDN博主「Lofan93」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/u011019468/java/article/details/98412416