zoukankan      html  css  js  c++  java
  • Webpack4自行配置辅助的小玩儿意(npm run dev后自动打开浏览器+Less配置+Css加前缀+使用import引入可不用加后缀)

    一. npm run dev后自动打开浏览器

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

    2.修改confitwebpack.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配置文件的modulrule里配置即可

     

    三.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引入可不用加后缀;

     

  • 相关阅读:
    【Codeforces 776B】Sherlock and his girlfriend
    BZOJ4942 NOI2017整数(线段树)
    BZOJ4516 SDOI2016生成魔咒(后缀数组+平衡树)
    BZOJ4943 NOI2017蚯蚓排队(哈希+链表)
    Codeforces Round#500 Div.2 翻车记
    BZOJ5093 图的价值(NTT+斯特林数)
    BZOJ2821 作诗(分块)
    BZOJ2724 [Violet]蒲公英(分块)
    BZOJ2001 HNOI2010城市建设(线段树分治+LCT)
    BZOJ1093 ZJOI2007最大半连通子图(缩点+dp)
  • 原文地址:https://www.cnblogs.com/miaSlady/p/10681349.html
Copyright © 2011-2022 走看看