webpack学习笔记 - Day02

1.  html-webpack-plugin 插件

　安装：npm i html-webpack-plugin -D

　　这个插件的两个作用：

　　　　1. 自动在内存中根据指定页面生成一个内存的页面

　　　　2. 自动把打包好的 main.js 追加到页面中去

　 有了这个插件，就不用在 index.html 中去手动写 <script> 标签去引入 main.js 文件了

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' // 指定生成页面的名称
        })
    ]
}

 

 

 

 

 2. 引用 style-loader、css-loader 解决 webpack 对 css 文件的处理

　　注意：webpack 默认只能打包处理 JS 类型的文件，无法处理其他类型的文件

　　　　我们需要手动安装一些合适的第三方 loader 加载器

　　　　1. 如果想要打包处理 css 文件，需要安装 npm i style-loader css-loader -D

　　　　2. 打开 webpack.config.js 配置文件，在里面新增一个配置节点 module (对象)， module 对象有个 rules 属性，这个 rules 属性是个

　　　　　 数组，存放了所有第三方文件的匹配和处理规则

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 目录下新增一个 index.css 文件，

 

 　　然后在 main.js 中引入：

 

　　 效果如下：

　　

 

•  其中踩了一个坑，webpack 和 webpack-cli 、html-webpack-plugin 之间的版本不兼容。于是卸载掉这三个( npm un webpack )，又重新安装，下面是可以正常打包的版本：

 

 3. webpack 处理第三方文件类型的过程：

　　1. 发现要处理的文件不是JS文件，就去 配置文件中查找有没有对应的第三方 loader 规则

　　2. 如果能找到对应的规则，就会调用 对应的 loader 处理这种文件类型

　　3. 在调用 loader 的时候，是从后往前调用的

　　4. 当最后的一个 loader 调用完毕，会把处理的结果直接交给 webpack 进行打包合并，最终输出到 main.js 中去

4.  less 和 scss 文件的处理

　4.1  npm i less-loader@7.3.0 -D，安装完会报错：（ less-loader 最新版本为8.0.0，和 less 版本不兼容，页面会报错，所以安装 7.3.0 版本的

 

 　　还需要安装 less：npm i less -D 

module: {
    rules: [
       { test: /\.css$/ , use: ['style-loader', 'css-loader'] }, // 配置 .css 文件的第三方 loader 规则
       { test: /\.less$/ , use: ['style-loader', 'css-loader', 'less-loader'] }
       // 配置 .less 文件的第三方 loader 规则
    ]
}

　　在 css 目录下创建 index.less 文件:

 

 　　可以看到，样式已生效：

 

 　　4.2 scss 文件

　　　　npm i sass-loader -D 安装好之后，还需要安装 node-sass：cnpm i node-sass -D