webpack学习笔记 - Day03

1. 安装 node-sass 的时候，踩了不少坑，

先是看到类似需要安装 python27的报错，去安装了 python 2.7.0，然后运行 cnpm i node-sass -D，安装了最新版本的，

执行 npm run dev 发现样式未生效，控制台报错：Node Sass version 5.0.0 is incompatible with ^4.0.0.，又去百度了一番，

sass-loader 和 node-sass 的最新版本不匹配，又卸载，安装了 4.14.1 版本的 node-sass。最后终于成功了：

2. url-loader 处理图片和字体

　　默认情况下，webpack 无法处理 html、js、css 文件中的 url 地址，不管是图片还是字体库。

　　运行 npm i url-loader -D 安装

　　2.1 处理图片

　配置文件 webpack.config.js：

const path = require('path');
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode: 'development', // 打包为开发模式
    // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
    entry: {
        main: './src/main.js'
    }, // 入口文件，从项目根目录指定
    output: { // 输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, '/dist/js'), // 将js打包到dist/js的目录
        filename: "[name].js" // 使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
    },
    // 只要是插件，一定要放到 plugins 节点中去
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({ // 创建一个在内存中生成 HTML 页面的插件
            template: path.join(__dirname, "src/index.html"), // 指定模板页面，将来会根据指定的页面路径，生成内存中的页面
            filename: 'index.html' // 指定生成页面的名称
        })
    ],
    module: {
        rules: [
           { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则
           { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则
           { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] },
           { test: /\.jpg|png|bmp|jpeg|gif$/ , use:  'url-loader'} // 处理图片路径的loader 
        ]
    }
}

　scss 文件：

    .parent {
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    .son {
        width: 300px;
        height: 300px;
        background-color: blue;
        background: url('../images/1.jpg');
        background-size: cover;
    }

　index.html：

    <div class="parent">
        <div class="son"></div>
    </div>

　效果如图：

　　url-loader 默认会把图片转换成 Base64编码格式，减少图片的二次请求。

limit 属性：

　　　　limit 的值是图片大小，单位是 byte

　　　　在 limit 大小范围内的图片会使用 url-loader 去解析，转为 base64 的字符串

　　　　但是超过 limit 大小的图片会默认启动 file-loader 去解析

　　　　因此提示 " file-loader not find "，需要安装 file-loader

module.exports = {
    mode: 'development', // 打包为开发模式
    // 入口配置的对象中，属性为输出的js文件名，属性值为入口文件
    entry: {
        main: './src/main.js'
    }, // 入口文件，从项目根目录指定
    output: { // 输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径
        path: path.resolve(__dirname, '/dist/js'), // 将js打包到dist/js的目录
        filename: "[name].js" // 使用[name]打包出来的js文件会分别按照入口文件配置的属性来命名
    },
    // 只要是插件，一定要放到 plugins 节点中去
    plugins: [ // 配置插件的节点
        new htmlWebpackPlugin({ // 创建一个在内存中生成 HTML 页面的插件
            template: path.join(__dirname, "src/index.html"), // 指定模板页面，将来会根据指定的页面路径，生成内存中的页面
            filename: 'index.html' // 指定生成页面的名称
        })
    ],
    module: {
        rules: [
           { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则
           { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则
           { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] },
             { test: /\.jpg|png|bmp|jpeg|gif$/ , use:  [
               {
                   loader: 'url-loader',
                   options: {
                       limit: 7000
                   }
               }
           ]} // 处理图片路径的loader 
          
        ]
    }
}

　　使用 file-loader 解析后，background 变成了 url 获取图片：

name 属性：可以指定图片打包后的名称格式

　　　　[hash:len]：hash 代表哈希值，最大支持32位，len 可以指定长度

　　　　[name]：引用的文件名

　　　　[.evt]：文件后缀

    module: {
        rules: [
           { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则
           { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则
           { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] },
           { 
                test: /\.jpg|png|bmp|jpeg|gif$/ ,
                include: resolve('src'),
                use:  [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 7000,
                            name: '[hash:16]-[name].[ext]'
                        }
                    }
                ]
            } // 处理图片路径的loader 
          
        ]
    }

　　效果图：图片名称变成 ' 16位哈希值 ' + ' - ' + ' 原图片名称 '

　　2.2 处理字体

　　举例：引用一个 bootstrap 的字体图标：

　　index.html：

    <div class="parent">
        <div class="son"></div>
    </div>
    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

　　main.js 引入 bootstrap.css：

　　// 注意：如果要通过路径的形式引入 node_modules 中的文件，可以直接省略 node_modules 这一层目录，直接写包的名称，然后后面跟上具体的文件路径

　　import 'bootstrap/dist/css/bootstrap.css'

　　webpack.config.js：

　　module: {
        rules: [
            { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则
            { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置 .less 文件的第三方 loader 规则
            { test: /\.scss$/ , use: ['style-loader', 'css-loader', 'sass-loader'] },
            { 
                test: /\.(jpg|png|bmp|jpeg|gif)$/ ,
                include: resolve('src'),
                use:  [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 7000,
                            name: '[hash:16]-[name].[ext]'
                        }
                    }
                ]
            }, // 处理图片路径的loader 
            {
                test: /\.(eot|woff|woff2|svg|ttf)/,
                use: 'url-loader'
            } // 处理字体
        ]
    }

　　效果如下：

3. Babel

　　在 webpack 中，默认只能处理一部分 ES6 的新语法，一些更高级的语法是无法处理的，因此需要借助于第三方 loader 去处理，将高级语法转为低级语法之后，会把结果交给webpack 去打包。

　　通过 Babel，可以将高级语法转为低级语法

　　1. 在webpack 中，可以运行下面两套命令，安装两套包，来安装 Babel 相关的 loader 功能：

　　　　1.1 第一套： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

　　　　1.2 第二套： cnpm i babel-preset-env babel-preset-stage-0 -D

　　2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加：

　　　　{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

　　　　注意：在配置 babel 的 loader 规则时，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有俩：

　　　　　　1. 如果不排除，会把 node_modules 的所有 js 文件都打包编译，非常消耗CPU，打包速度非常慢

　　　　　　2. 就算最终把所有 node_modules 的 JS 文件转换完了，项目也无法正常运行

　　3. 在项目的根目录中，新建一个叫做 .babelrc 的 Babel 配置文件，这个配置文件，属于 JSON 格式，所以，在写 .babelrc 配置的时候，必须符合 JSON 语法规范：

　　　不能写注释，字符串必须用双引号

　　　　3.1 在 .babelrc 写如下的配置：可以把 preset 翻译成语法的意思

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]        
}

　　又出现版本不对应的情况了：

　　卸载重装即可：

　　　　npm un babel-core

　　　　cnpm i -D @babel/core

　　可以参考这些文档：

　　　　https://www.jianshu.com/p/e21d19875fbb

　　　　https://blog.csdn.net/robot7th/article/details/90115782

package.json 最终文件：

"devDependencies": {
    "@babel/core": "^7.13.8",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.13.9",
    "@babel/preset-env": "^7.13.9",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.1.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^4.1.1",
    "less-loader": "^7.3.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.0.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

.babelrc 文件:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

main.js 书写 class 的静态属性：

    class Person {
        static info = '人类';
    }
    console.log(Person.info);

posted @ 2021-03-09 00:00 我就尝一口阅读(48) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

我就尝一口

webpack学习笔记 - Day03

公告