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

     

  • 相关阅读:
    日本美女自拍大赛作品欣赏 最后一张看醉了
    BERT(Bidirectional Encoder Representations from Transformers)理解
    P-R曲线及与ROC曲线区别
    残差网络(Residual Network)
    Attention is all you need 论文详解(转)
    联合建模心得
    拒绝推断问题(转)
    关联规则简述
    pycharts实现可视化
    CRF++进行中文分词实例
  • 原文地址:https://www.cnblogs.com/miaSlady/p/10681349.html
Copyright © 2011-2022 走看看