zoukankan      html  css  js  c++  java
  • webpack(4) 配置

    构建webpac时  先 npm install  然后 要引入  webpack  webpack-cli

    css-loader 3版本后

      发现 localIdentName要写在modules里  并且不用写modules:true 也可以开启css modules

                          modules: {localIdentName: '[path]-[name]-[hash:base64:5]'  }
        如:{
                    test: /.(styl|stylus)$/,
                    use: ExtractPlugin.extract({
                        fallback: 'vue-style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        localIdentName: '[path]-[name]-[hash:base64:5]'   //类名
                                    }
                                }
                            },
           'postcss-loader',
                            'stylus-loader'
                        ]
                    })
                },
     
    babel-loader 8 以上要使用  @babel/core   (.js .jsx ... 要使用babel-loader 转换  )
     
    使用postcss-loader 插件 --后处理css css编译完成后(stylus -> css) 通过autoprefixer优化-->css属性加前缀(兼容浏览器)
      可以在外面加上postcss.config.js文件来配置
        const autoprefixer = require('autoprefixer')
        module.exports = {
          plugins: [
            autoprefixer()
          ]
        }
     
    在vue项目中 样式的代码需要经过vue-style-loader的转换
     
    处理图片 需要引入url-loader 和 file-loader
      用法
        {
                    test: /.(gif|jpg|jpeg|png|svg)$/,
                    use: [{
                        loader: 'url-loader',
                          options: {
                            limit: 1024,
                            name: 'resources/[path][name].[hash:8].[ext]'
                          }
                    }]
                }
     
    Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
     
    vue 去掉元素之间的空格
      {   
       test: /.vue$/,
            loader: "vue-loader",
      options: {
        compilerOptions: {
            preserveWhitespace: false
        }
      }
      }
     
     
     
    打包生成html文件  html-webpack-plugin  并且在plugins中实例化
     
    单独打包css文件(非js文件)  引入extract-text-webpack-plugin这个插件  extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本 
      安装extract-text-webpack-plugin@next    (webpack4推荐使用mini-css-extract-plugin)
      使用 :
        引入  const ExtractPlugin = require('extract-text-webpack-plugin')
           module中    test:/...需要打包成css文件./  , use:ExtractPlugin.extract({loader....})
          在plugins中实例化  --- new ExtractPlugin('styles.[hash:5].css')   -----css文件名
  • 相关阅读:
    Mysql之binlog日志说明及利用binlog日志恢复数据操作记录
    JS使用Cookie
    vue2 生命周期
    vue2 手记
    vue2 design 手记
    composer.json详解
    mysql查询优化
    dockerfile
    一套不错的docker lnmp
    服务器部署docker lnmp环境
  • 原文地址:https://www.cnblogs.com/j190512/p/11760147.html
Copyright © 2011-2022 走看看