Webpack4自行配置輔助的小玩兒意（npm run dev後自動打開瀏覽器+Less配置+Css加前綴+使用import引入可不用加後綴）

一． npm run dev後自動打開瀏覽器

1. cnpm i open-browser-webpack-plugin --save

2.修改confit\webpack.dev.conf.js文件。 
在頂部聲明最下面加入：

var OpenBrowserPlugin = require('open-browser-webpack-plugin')

3.在plugins中加入：

new OpenBrowserPlugin({ url: 'http://localhost:1818 }),

 

二．Less配置

1. cnpm install less less-loader --save-dev

2.在config配置文件的modul的rule裏配置便可

 

三．Css加前綴

1. cnpm install autoprefixer

2.在package.json中添加

"browserslist": [

    "defaults",

    "not ie < 11",

    "last 2 versions",

    "> 1%",

    "iOS 7",

    "last 3 iOS versions"

  ]

3．在根目錄下增長文件webpack.config.js，配置以下：

module.exports = {

  plugins:[

      require('autoprefixer') // 自動添加css前綴

  ]

}

 

4. 在webpack配置文件中加上

{//CSS處理

        test: /\.css$/,

        loader: "style-loader!css-loader!postcss-loader?modules",

        exclude: /node_modules/,

      },

      {

          test:/\.less$/,

          use:['style-loader','css-loader','less-loader','postcss-loader'] // 編譯順序從右往左

      },

截圖：

 

 

四．配置使用import引入可不用加後綴；