webpack个人学习笔记(二)

关于webpack----个人学习笔记

一、webpack加载css、less、sass

   1.了解loader

                 loader 让webpack 能够去处理那些非JavaScript文件(webpack自身只理解JavaScript)。loader可以将所有类型的文件转换为webpack能够处理的有效模块， 然后你就可以利用webpack的打包能力，对他们进行处理

            本质上， webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块

                 在更高层面，在webpack的配置中 loader 有两个目标：

                     1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

                     2.use 属性，表示进行转换时，应该使用哪个 loader 。

        

   2.安装 loader       

          安装 style-loader 和 css-loader

          下载：

           npm install style-loader css-loader --save-dev

   3.配置 loader

        1） 在webpack.config.js 文件中配置 module 中的 rules

                   在 webpack 的配置中 loader 有两个目标：

                   1.test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

                   2.use 属性，表示进行转换时，应该使用哪个 loader 。

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
            // 引用顺序 style-loader在前， css-loader在后
        }
    ]
}

   4.编译less 和 sass

        1)   @width: 10px;

              @height: @width + 10px;                         编译为                #header {

                                                                           --------------->                width: 10px;

              #header {                                                                                  height: 10px; 

                height: @height;                                                                }

                width: @width;

              }

      2）安装 loader

            安装less-loader 和 less

            下载：

            npm install less-loader less --save-dev

           

           配置 loader

module: {
    rules: [
        {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
            // 引用顺序 style-loader在前， css-loader在后
        }
    ]
}

    3）sass 安装 loader

         安装 sass-loader 和 node-sass

         下载：

         npm install sass-loader node-sass --save-dev

 

         配置 loader

module:{
    rules:[
        {       //以.scss结尾的文件
            test:/\.scss$/,//标识出应该被对应的loader进行转换的某个或者某些文件
            use:[{loader: 'style-loader'},{loader: 'css-loader'},{loader: 'sass-loader'}]//表示进行转换时应该使用哪个loader
            //use: ['style-loader', 'css-loader', 'sass-loader']
        }
    ]
}

二、使用PostCSS处理浏览器前缀

           安装loader

           安装 postcss-loader 和 autoprefixer

 

           下载

           npm install --save-dev postcss-loader autoprefixer

         

           配置loader

                  搭配 autoprefixer 使用

module:{
    rules:[
        {     //以.css结尾的文件
            test:/\.scss$/,//标识出应该被对应的loader进行转换的某个或者某些文件
            use:['style-loader','css-loader','less-loader',{
                loader: 'postcss-loader',
                options: { // 选项设置
                    plugins: [
                        require("autoprefixer")({
                           browsers: [
                                'ie >= 8', //ie版本大于等于ie8
                                'Firefox >= 20', //火狐浏览器大于20版本
                                'Safari >= 5', //safari大于5版本
                                'Android >= 4', //版本大于Android4
                                'Ios >= 6', //版本大于ios6
                                'last 4 version' //浏览器最新的四个版本
                            ]
                        })
                    ] //插件，处理自动添加兼容性
                 },
             }]//表示进行转换时应该使用哪个loader
        }
    ]
}

第二种配置方式---webpack.js中如下配置 

module:{
    rules:[
        {     //以.css结尾的文件
            test:/\.scss$/,//标识出应该被对应的loader进行转换的某个或者某些文件
            use:['style-loader','css-loader','less-loader',{
                loader: 'postcss-loader',
                options: { // 选项设置
                    plugins: [
                        require("autoprefixer")
                    ] //插件，处理自动添加兼容性
                 },
             }]//表示进行转换时应该使用哪个loader
        }
    ]
}

并在pakage.json里加上下图设置：

"browserslist": [
    'ie >= 8', //ie版本大于等于ie8
    'Firefox >= 20', //火狐浏览器大于20版本
    'Safari >= 5', //safari大于5版本
    'Android >= 4', //版本大于Android4
    'Ios >= 6', //版本大于ios6
    'last 4 version' //浏览器最新的四个版本
]

以上配置容易造成loader版本不兼容问题，导致编译失败

最佳配置方式

    1.根目录创建postcss.config.js文件

module.exports = {
    plugins: [
      require('autoprefixer')
    ]
};

    2.根目录创建.browserslistrc文件，填写对应得浏览器版本信息

defaults
not ie < 8
last 2 versions
> 1%
iOS 7
last 3 iOS versions

   3.webpack.config.js文件中引入postcss-loader

{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
},
{
    test: /\.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
},
{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader',  'sass-loader']
},

三、文件处理

   1.图片处理

         1）安装loader

              下载安装file-loader

              npm install --save-dev file-loader

        2）配置config文件

modules:{
    rules:[
        {
            test:/\.(png|jpg|gif|jpeg)$/,
            use:'file-loader'
        }
    ]
}

       3）选项配置

{
  test:/\.(png|jpg|gif|jpeg)$/,
  use:[
      {
          loader: 'file-loader',
          options: {
             // name: '[path]wangou.jpg', // 资源相对于context的路径
             name: '[hash]wangou.jpg', // hash生成一串哈希值
             // context: '../' //默认为webpack.config.js所在的路径--->根目录
            publicPath: 'http://www.abc.com/img', // 设置发布后的路径
            outputPath: './img' // 生成一个img文件夹存放图片
         }
      }
  ]
}

配置 options

     name: 为你的文件配置自定义文件名模板 (模人值[hash].[ext])

     context: 配置自定义文件的上下文，默认为 webpack.config.js

     publicPath: 为你的文件配置自定义 public 发布目录

     outputPath: 为你的文件配置自定义 output 输出目录



     [ext]:资源扩展名

     [name]: 资源的基本名称

     [path]: 资源相对于context的路径

     [hash]: 内容的哈希值

   2.字体文件处理

          1）下载字体文件

               以bootstrap 字体文件为例

               下载地址： https://v3.bootcss.com/getting-started/

          2）配置config文件

rules:[
    {
        test:/\.css$/,
        use:['style-loader','css-loader']
    },
    { // 搭配css处理loader使用
        test:/\.(ttf|woff|woff2|eot|svg)$/,
        use:[{
            loader: 'file-loader',
           options:{
               outputPath:'font/'
           },
           
        }]
    }
]

       入口文件--index.js中引入，在html文件中使用对应的图标即可生效

import './css/bootstrap.min.css';

   3.第三方js库处理

        以jquery库为例

           1）本地导入

                编写配置文件：

                           webpack.ProvidePlugin参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库。webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。

                       如果webpack配置了resolve.alias选项（理解成“别名”），那么webpack.ProvidePlugin就会顺着设置的路径一直找下去

                       使用webpack.ProvidePlugin 前需要引入webpack

const webpack = require("webpack");

resolve:{
    alias: {
        jQuery:path.resolve(__dirname,'public/js/jquery.min.js')
    }
},
plugins:[
    new webpack.ProvidePlugin({
    jQuery: 'jQuery'
   })
]

          2）npm安装模块

               安装 jquery 库：

               npm install jquer --save-dev

               直接在js里 import 引入

               import $ from 'jquery'