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

     

  • 相关阅读:
    java 开发之linux 下 tomcat
    Eclipse 工具栏不见了
    开始Java学习(Java之负基础实战)
    error: Embedded binary's bundle identifier is not prefixed with the parent app's bundle identifier
    真机调试iwatch
    创建iwatch 程序选项
    OC--类型为ID 的类的名称
    Cell.reuseIdentifier 指什么
    mongodb在win7下的安装和使用
    mongodb 常用命令
  • 原文地址:https://www.cnblogs.com/miaSlady/p/10681349.html
Copyright © 2011-2022 走看看