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

     

  • 相关阅读:
    CSS3 @media 查询(制作响应式布局)
    seajs学习
    LABjs、RequireJS、SeaJS 区别
    jquery知识简单运用
    jquery拖拽
    选项卡简单版
    手风琴,回到顶部,无限运动
    分步运动
    多图片放大显示
    测试定时器、获取字符串的字节长度
  • 原文地址:https://www.cnblogs.com/miaSlady/p/10681349.html
Copyright © 2011-2022 走看看