webpack学习笔记

安装

全局不推荐

npm install webpack webpack-cli -g//webpack-cli 可以帮助我们在命令行⾥使⽤npx ,webpack等相关指令
webpack -v

局部安装项⽬内安装

npm install webpack webpack-cli --save-dev //-D
webpack -v //command not found 默认在全局环境中查找
npx webpack -v// npx帮助我们在项⽬目中的node_modules⾥查找webpack

安装指定版本

npm info webpack//查看webpack的历史发布信息 
npm install webpack@x.xx webpack-cli -D

webpack 配置文件

webpack有默认的配置文件，叫webpack.config.js，我们可以对这个文件进行修改，进行个性化配置，也可以不使用默认的配置文件。

默认的配置文件:webpack.config.js

npx webpack //执行命令后，webpack会找到默认的配置文件，并使用执行

不使用默认的配置文件: webpackconfig.js

 npx webpack --config webpackconfig.js //指定webpack使用webpackconfig.js文件来作为 配置文件并执行

Webpack 的核⼼心概念

entry

指定打包⼊⼝口文件

entry:{
  main: './src/index.js'
}
=====
entry:"./src/index.js"

output

打包后的文件位置

output: {
    publicPath:"xxx",
    filename: "bundle.js",
    // 必须是绝对路路径
    path: path.resolve(__dirname, "dist")
}

loader

webpack是模块打包工具，默认只知道如何处理js模块，⽽模块不仅仅是js，还可以是css，图片或者其他格式，那么其他格式的模块处理，和处理方式就需要loader了。
当webpack处理到不认识的模块时，需要在webpack中的module处进行配置，当检测到是什么格式的模块，使用什么loader来处理。

module: {
        rules: [
            {
                test: /.xxx$/,
                loader: 'xxx-loader',
                options: {
                   ...
                }
            }
        ]
},

常用loader

处理静态资源：

file-loader:处理静态资源模块。

原理是把打包⼊⼝口中识别出的资源模块，移动到输出⽬目录，并且返回一个地址名称。所以我们什什么时候用file-loader呢?场景:就是当我们需要模块，仅仅是从源代码挪移到打包⽬目录，就可以使用file-loader来处理，txt，svg，csv，excel，图片资源啦等等。

npm install file-loader -D

module: {
    rules: [
        {
            test: /.(png|jpe?g|gif)$/,
            loader: 'file-loader',
            options: {
                name: "[name]_[hash].[ext]",//[name]⽼资源模块的名称,[ext]老资源模块的后缀
                outputPath: 'img/'//打包后的存放位置
            }
        }
    ]
},

url-loader

可以处理file-loader所有的事情，但是遇到jpg格式的模块，会把该图片转换成base64格式字符串，并打包到js里。对⼩小体积的图片⽐比较合适，⼤大图片不合适。

module: {
    rules: [
        {
            test: /.(png|jpe?g|gif)$/,
            loader: "url-loader",
            options: {
                name: "[name]_[hash].[ext]", outputPath: "images/", //⼩小于2048，才转换成base64 limit: 2048
            }
        }
    ]
},

处理css

style-loader css-loader

css-loader 分析css模块之间的关系，并合成一个css；把css-loader⽣生成的内容，以style挂载到⻚页面的heade部分。

npm install style-loader css-loader -D

module: {
    rules: [
        {
            test: /.css$/,
            use: ["style-loader", "css-loader"]
        }
    ]
},

sass-load

sass-load 把sass语法转换成css ，依赖node-sass模块

npm install sass-loader node-sass -D

module: {
    rules: [
        {
            test: /.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
    ]
},

postcss-loader

样式⾃自动添加前缀

npm i -D postcss-loader

module: {
    rules: [
        {
            test: /.css$/,
            use: ["style-loader", "css-loader","postcss-loader"]
        }
    ]
},

安装autoprefixer

npm i autoprefixer -D

新建postcss.config.js

module.exports = {
   plugins: [require("autoprefixer")]
};

处理es6

babel-loader

babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到 @babel/preset-env来做；@babel/preset-env里包含了了es6转es5的转换规则。

npm i babel-loader @babel/core @babel/preset-env -D

通过上面的几步还不够，Promise等一些还有转换过来，需要用@babel/plugin-transform-runtime，把es的新特性都装进来，来弥补低版本浏览器器中缺失的特性

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

module.exports = {
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    plugins: [
                        [
                            "@babel/plugin-transform-runtime",
                            {
                                "absoluteRuntime": false,
                                "corejs": 2,
                                "helpers": true,
                                "regenerator": true,
                                "useESModules": false
                            }
                        ]
                    ]
                }
            }
        ]
    }
}

如果觉着options的东西太多了，写这里不太合适，可以新建一个.babelrc文件。把options部分移⼊到该文件中。

//.babelrc 
{
   "plugins": [
        [
        "@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
            }
        ]
    ]
}
 //webpack.config.js
 {
     test: /.js$/,
     exclude: /node_modules/,
     loader: "babel-loader"
 }

配置React打包环境，安装babel与react转换的插件。

npm install --save-dev @babel/preset-react

在babelrc文件里添加:

//.babelrc 
{
   "plugins": [
        [
        "@babel/plugin-transform-runtime",
        {
            "absoluteRuntime": false,
            "corejs": 2,
            "helpers": true,
            "regenerator": true,
            "useESModules": false
            }
        ],
        "@babel/preset-react"
    ]
}

plugins

plugin 是 wepback 的支柱功能。插件目的在于解决 loader无法实现的其他事，由于loader仅在每个文件的基础上执行转换，而插件(plugins) 常用于（但不限于）在打包模块的 “compilation” 和 “chunk” 生命周期执行操作和自定义功能。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。

多数插件可以通过选项(option)自定义。

常用 plugins

HtmlWebpackPlugin

html-webpack-plugin会在打包结束后，自动⽣成一个html文件，并把打包生成的js模块引⼊到该html 中。

npm install --save-dev html-webpack-plugin

clean-webpack-plugin

清除打包生成的冗余重复文件

mini-css-extract-plugin

会在打包结束后，自动生成一个css文件，并把打包生成的css模块引⼊到html 中。

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },//用MiniCssExtractPlugin，这里就不是style-loade了
                    'css-loader', 'postcss-loader'
                ]
            }
            ...
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '模板',
            template: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),

    ],
    ...
}

WebpackDevServer

提升开发效率的利器每次改完代码都需要重新打包一次，打开浏览器，刷新一次，很麻烦我们可以安装使用webpackdevserver来改善这块的体验。

npm install webpack-dev-server -D

module.exports = {
    ...
    devServer: {
        contentBase: "./dist",
        open: true,
        port: 8081
    },
}

启动服务后，会发现dist⽬目录没有了了，这是因为devServer把打包后的模块不会放在dist⽬目录下，⽽是放到内存中，从⽽提升速度。

开发期间，webpack可以配置proxy搞定跨域，上线后我们使用nginx转发。

module.exports = {
    ...
    devServer: {
        ...
        proxy: {
            '/api': {
                target: 'http://localhost:9092'//所有以/api开头的请求都转发到http://localhost:9092
            }
        }
    },
}

Hot Module Replacement (HMR:热模块替换)

启动hmr

const webpack = require("webpack");
...
module.exports = {
   ...
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        ...
        hot:true, 
        hotOnly:true,//即便便HMR不⽣生效，浏览器器也不⾃自动刷新，就开启hotOnly 
    },
}

这样至少css变化会引起热更新，但是js不会，要想使js热更新，还需要使用module.hot.accept来观察模块更新从⽽更新。

//index.js
 if (module.hot) {
    module.hot.accept("./xxx", function() {
     ...
    }); 
}

sourceMap

源代码与打包后的代码的映射关系，

开发环境推荐:devtool:"cheap-module-eval-source-map"线上环境可以不开启:如果要看到一些错误信息，推荐devtool:"cheap-module-source-map"

devtool参数说明：eval:速度最快
　　　　　　　　 cheap:较快，不用管列的报错
　　　　　　　　 module:第三方模块

module.exports = {
    mode: 'development',
    devtool: "cheap-module-eval-source-map",
}

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    entry: "./index.js",
    output: {
        // filename: 'pack.js',
        path: path.resolve(__dirname, './dist')
    },
    module: {
        rules: [
            {
                test: /.(png|jpe?g|gif)$/,
                loader: "url-loader",
                options: {
                    name: "[name]_[hash].[ext]", outputPath: "images/", //⼩小于2048，才转换成base64 limit: 2048
                }
            },

            {
                test: /.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    'css-loader', 'postcss-loader'
                ]
            },
            {
                test: /.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    plugins: [
                        [
                            "@babel/plugin-transform-runtime",
                            {
                                "absoluteRuntime": false,
                                "corejs": 2,
                                "helpers": true,
                                "regenerator": true,
                                "useESModules": false
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '模板',
            template: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),

    ],
    mode: 'development',
    devtool: "cheap-module-eval-source-map",
    devServer: {
        contentBase: "./dist",
        open: true,
        port: 8081,
        proxy: {
            '/api': {
                target: 'http://localhost:9092'
            }
        }
    },
}