webpack学习

webpack学习

1.webpack构成

//webpack.config.js配置文件

//普通页面js文件中使用的是es6等语法
//但是webpack.config.js面向的是node 所以得用nodeJs中的commonJS语法
//所以使用 module.exports = {}

//引入nodejs中的path模块 用来拼接绝对路径
const { resolve } = require("path")

module.exports = {
    //1.入口文件
    entry: './src/index.js',
    //2.输出
    output: {
        filename: 'main.js',
        //__dirname 是nodejs的变量，代表当前文件的目录绝对路径 E:\WorkSpace\test\页面测试\
        path:resolve(__dirname,'build')//E:\WorkSpace\test\页面测试\build
    },
    //3.loader配置
    module: {
        rules: [
            {
                //进行正则匹配，匹配所有以.css结尾的文件
                test: /\.css$/,
                //打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
                use: [
                    //创建style标签内，将js里的样式资源插入到head中
                    'style-loader',
                    //将css文件变成commonJs模块加载到js中，里面的内容是字符串
                    'css-loader'
                ]
            }
        ]
    },
    //4.插件配置
    plugins: [],
    //5.项目打包模式 development开发环境 productio生产环境
    mode:'development'
}

注意：当要使用多个loader时使用use:[" “,” "]，但是只有一个loader时可以直接用 loader:'url-loader’

2.webpack执行顺序

（1）从入口文件开始，在入口文件中找到其中引入的模块，例如下图中找到本身和index.css文件，

（2）将找到的这些文件与loader的规则进行正则匹配，将匹配到的文件使用对应的加载器进行逐步解析

（3）将解析的内容放到对应的出口文件中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQh8wvfy-1606808598706)(./img/1604556709373.png)]

3.webpack打包css less sass 资源

3.1普通打包

（1）.css资源只需要下载css-loader和style-loader即可

（2）.less资源打包需下载 less、less-loader、css-loader、style-loader

（3）.sass资源打包需下载sass、sass-loader、css-loader、style-loader

//loader配置
    module: {
        rules: [
            {
                //进行正则匹配，匹配所有以.css结尾的文件
                test: /\.css$/,
                //打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
                use: [
                    //创建style标签内，将js里的样式资源插入到head中
                    'style-loader',
                    //将css文件变成commonJs模块加载到js中，里面的内容是字符串
                    'css-loader'
                ]
            },
            {
                //进行正则匹配，匹配所有以.less结尾的文件
                test: /\.less$/,
                //打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
                use: [
                    //创建style标签内，将js里的样式资源插入到head中
                    'style-loader',
                    //将css文件变成commonJs模块加载到js中，里面的内容是字符串
                    'css-loader',
                    //将less语法转化成css的语法 需要下载less和less-loader加载器
                    'less-loader'
                ]
            }
        ]
    },

3.2.使用postcss-loader对css进行浏览器适配

（1）下载postcss-loader以及postcss-preset-env

（2）在package.json中添加browserslist配置项

（3）设置当前node的开发环境（默认为生产环境），使得其根据环境选择browserslist指定的css兼容性，

	//设置环境变量 使得postcss-loader去找package.json中的browserslist的开发环境兼容性
	process.env.NODE_ENV = "development";
	//在module.exports = {}上面

以下是两种配置方式：

（1）直接在webpack.config.js文件中配置

{
        //进行正则匹配，匹配所有以.css结尾的文件
        test: /\.css$/,
        //打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
        use: [
            //创建style标签内，将js里的样式资源插入到head中
            //'style-loader',
            //取代style-loader将本来要放在头部的css样式放到单独的css文件中
            MiniCssExtractPlugin.loader,
            //将css文件变成commonJs模块加载到js中，里面的内容是字符串
            'css-loader',
            {
                loader: "postcss-loader",
                options: {
                    postcssOptions:{
                        plugins:[
                            [
                                'postcss-preset-env',
                                {ident:'postcss'}
                            ]
                        ]
                    }
                }
            }
        ]
},

（2）新建postcss.config.js文件配置（与webpack.config.js同级）

module.exports = {
    plugins: [
        [
            'postcss-preset-env',
            {
                ident: "postcss"
            },
        ],
    ],
}

{
    //进行正则匹配，匹配所有以.css结尾的文件
    test: /\.css$/,
    //打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
    use: [
        //创建style标签内，将js里的样式资源插入到head中
        //'style-loader',
        //取代style-loader将本来要放在头部的css样式放到单独的css文件中
        MiniCssExtractPlugin.loader,
        //将css文件变成commonJs模块加载到js中，里面的内容是字符串
        'css-loader',
        'postcss-loader'
    ]
},

4.webpack打包html资源

插件的使用方法：1.下载 2.引用 3.使用

**（1）下载：**html资源的打包需要使用插件而不是loader，下载html-webpack-plugin插件

//插件下载：webpack5：npm i html-webpack-plugin@next -D
//		   webpack4：npm i html-webpack-plugin -D

（2）引入：

const HtmlWebpackPlugin = require('html-webpack-plugin')

（3）使用

//插件配置
    plugins: [
        //html-webpack-plugin
        //功能：默认创建一个空的html文件 并自动在head引入打包输出的js/css文件
        //此处根据需求可以打包出多个html文件
        new HtmlWebpackPlugin({
            filename:'index2.html' //打包后的名称 默认为index.html
        }),
        new HtmlWebpackPlugin({
            //复制一份该路径下的index.html文件，并且仍然自动引入打包好的js css文件
            template: './src/index.html',
        })
    ],

5.webpack打包图片资源

图片资源主要分为两类：1.css里的图片路径 2.html页面中的图片路径，

所以对图片资源的打包也分两种方式：

对css文件中图片打包：

（1）下载对应的加载器：file-loader、url-loader

（2）配置loader规则

{
    //该加载器只能打包css文件里的图片，不能处理html页面上的img标签图片
    test: /\.(jpg|png|gif)$/,
    //虽然只用一个loader 但是url-loader是依赖于file-loader的 所以需要下载两个 url-loader、file-loader
    loader: 'url-loader',
    options: {
        //小于8kb的图片将被转化成base64格式
        limit: 8 * 1024,
        //esModule: false
        //只取hash值的前十位作为图片名称
        name:'[hash:10].[ext]'
    },
},

对html文件中图片打包：

（1）下载对应的加载器：html-loader

（2）配置loader规则

{
    //该加载器处理的是页面上的img标签中的图片
    test: /\.html$/,
    loader:'html-loader'
}

注意：

（1）webpack4中使用这两个规则时需要在url-loader的options中加入esModule: false，将他的解析方式由es6转换成commonJs，这样html-loader才能读懂，否则会报错；

（2）webpack5中使用这两个规则则需要在output中加入配置项publicPath:’./'

6.webpack-dev-server的使用

（1）下载webpack-dev-server :npm i webpack-dev-server -D

​ 注意：在安装之前你得先在本地安装webpack-cli

（2）配置：添加devServer属性（和entry、output等参数同级）

devServer: {
    //特点：只会在内存中编译打包，没有任何输出，不会影响到磁盘文件中的dist文件夹
    //读取的文件来源，此时拿到的是打包后的文件
    contentBase: resolve(__dirname, 'dist'),
    //使用gzip压缩
    compress: true,
    //端口号
    port: 3000,
    //是否立即打开
    open:true
}

（3）执行启动命令：npx webpack-dev-server

注意：

在普通使用webpack打包时output中的publicPath是**./，但是在启动devserver时，由于其读取的直接是内存中的文件，所以不能使用./，若是使用./则此时读取的还是本地磁盘的dist**文件夹内容，此时页面不会随着修改自动刷新，所以得改成 /

7.打包后清除无用的资源

（1）安装插件：npm i clean-webpack-plugin -D

（2）引入

//此时的版本为 "clean-webpack-plugin": "^3.0.0",
//它各个版本的使用方法有差异 注意看官网
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

（3）使用：

 plugins: [
            new CleanWebpackPlugin(),
        ],

附件：pachage.json

{
  "name": "study1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.2.1",
    "postcss-loader": "^4.0.4",
    "postcss-preset-env": "^6.7.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}