Webpack4学习笔记

一、基础篇

1.全局安装和本地安装的区别

• 安装位置不同

  全局安装：安装在电脑的全局环境中。注：可通过npm root -g查看全局安装目录

  本地安装：安装在当前项目中并且在当前项目中目录下的package.json文件中的devDependencies或者dependencies中记录安装包的版本信息

• 调用方式不同

  全局安装：全局安装后可以供命令行使用，开发者可以在命令行中直接运行该组件包支持的命令

  本地安装：本地安装后可以使用require、import等方式引入项目中的node_modules下的文件

2.开发依赖于项目依赖的区别

• 开发依赖：package.json文件中devDependencies记录的依赖；只用于开发环境，打包上线不需要，比如webpack、glup等这些工具都只是在开发阶段需要，一旦项目投入真正的使用便不依赖这些插件

• 项目依赖：package.json文件中dependencies记录的依赖；项目投入真正使用的时候仍然需要依赖的插件，比如react、react-dom、react-router-dom、jquery等，一旦dependencies中没有这些插件，项目投入使用的时候就会报错

• 注：npm 安装的时候给我们提供的三种方式

  npm install packagename：将插件安装在项目中但不会在package.json文件中写入

  npm install packagename --save：将插件安装在项目中，并在package.json文件的dependencies中记录

  npm install packagename --save -dev：将插件安装在项目中，并在package.json文件的devDependencies中记录

3.使用webapck4需要安装的模块

• webpack webpack-cli

4.webpack默认配置的名字文件的名字(两种)

• webpack.config.js webpackfile.js

5.webpack打包的结果为什么可以在浏览器中运行

• webapck使用commonJS规范，其在内部实现了一个require方法

6.webpack的模式（mode）及其作用

• development：开发模式，可以看到打包后的结果，不会进行压缩和优化操作
• production：生产模式，会压缩文件进行优化

7.实现执行命令脚本在package.json中的配置

<!--package.json-->
"script": {
    "dev": "webpack-server-dev",
    "build": "webpack"
}
复制代码

8.实现简单的开发服务器配置

<!--webpack.config.js-->
devServer: {
    port: 3000, // 端口号
    progress: true, // 进度条
    contentBase: './build', // 指定服务器指向的文件夹
    compress: true, // 使用Gzip压缩
    open: ture // 自动打开浏览器
}
复制代码

9.实现压缩产生的html文件

使用html-webpack-plugin插件 (npm i html-webpack-plugin --save -dev)

<!--webpack.config.js-->
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html', // 传入模板的路径
            filename: 'index.html', // 打包后的文件名
            minify:{ // 压缩配置
                removeAttributeQuotes: true, // 删除属性的双引号
                collapseWhitespace: true, // 折叠空行
            }
        })
    ]
}
复制代码

10.解决打包后的缓存问题

• 配置hash: true

plugins:[
    new HtmlWebpackPlugin({
        template: './src/index.html',
        minify: {
            ...
        },
        hash: true //加入哈希戳引入
    })
]
复制代码

11.webapck中loader的做什么的

• 用来加载处理各种形式的资源，用于对模块的源代码进行转换

12.css-loader&&style-loader的作用

• css-loader：用于处理css文件中的@import解析路径，将css转换为commonJS模块
• style-loader：用于将处理好的css样式插入到打包后的html文件中，默认插到最后。若我们想通过我们写的样式覆盖掉打包后的样式，譬如我们的组件开发同学需要做如下配置

<!--webpack.config.js-->
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: 'style-loader',
                    options: {
                        insertAt: 'top'
                    }
                }
            ]
        }
    ]
}
复制代码

13.loader的特点

• 简单，责任单一、链式，可以链式调用、保证输出的结果是一个模块

14.loader有几种写法

• 字符串、数组、对象

15.loader默认的执行顺序

• 从右到左，从下到上

16.使用loader如何传递参数

• 通过options对象

17.常见的css预处理器及其对应的loader

• less--->less-loader
• sass--->sass-loader、node-sass
• stylus--->stylus-loader

18.实现css样式抽离

• 通过mini-css-extract-plugin 插件，并将style-loader替换为MiniCssExtractPlugin.loader

<!--webpack.config.js-->
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins:[
    new MiniCssExtractPlugin({
        filename: 'main.css' // 抽离后的文件名
    })
],
module:{
    rules: [
        {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader
                }
            ]
        }
    ]
}
复制代码

19.实现抽离后的css样式文件压缩

• 使用optimize-css-assets-webpack-plugin

<!--webpack.config.js-->
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
    mode: 'development',
    optimization: {
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }
}
复制代码

20.实现自动添加浏览器前缀

• 使用postcss-loader 配合 autoprefixer使用；需要有一个单独的postcss.config.js文件

<!--postcss.config.js-->
module.exports = {
    plugins: [require('autoprefixer')]
}

<!--webpack.config.js-->
module.exports = {
    mode: 'development',
    ertry: './src/index.js',
    output: {
        ...
    },
    optimization: {
        ...
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                ...,
                'postcss-loader'
                ]
            }
        ]
    }
}
复制代码

21.压缩js文件需要的插件

• uglifyjs-webpack-plugin 插件

<!--webpack.config.js-->
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
    ...,
    optimization: {
        minimizer: [
            new UglifyjsWebpackPlugin({
                cache: true, //使用缓存
                parallel: true, // 使用并发打包
                sourceMap: true // 使用源码映射
            })
        ]
    }
}
复制代码

转载于:https://juejin.im/post/5c4f12d9e51d4552d573b769