webpack在内存生成html,webpack学习笔记 - Day02

1.  html-webpack-plugin 插件

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

这个插件的两个作用：

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

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

有了这个插件，就不用在 index.html 中去手动写

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 -Dmodule: {

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