1、新建文件夹，进入

2、npm init //初始化npm

3、安装webpack（全局或者局部），这里局部安装

npm install webpack webpack-cli --save-dev

npm install webpack webpack-cli --g//全局安装
//不推荐全局安装webpack，因为全局安装之后如果多个webpack项目版本不一致，全局安装之后其他项目就不能再运行起来了，解决的办法就是先删除当前版本号，在安装对应版本webpack即可启动项目，
但是两个项目之间有依赖关系，又想启动webpack4.0又想启动webpack5.0项目，通过全局安装就没办法了

4、局部安装查看webpack信息可以使用

npx webpack -v 或者 webpack -v  （npx 也适用于局部安装中查看其它插件信息）

5、初始化完成，之后就可以创建一些项目相关文件夹，如

src目录 //开发目录

dist目录 //存放打包后的文件

6、根目录下创建index.html文件，并且引入打包后的js文件，如引入bundle.js

7、src下创建一些js或者css

8、给项目创建一个webpack配置文件在项目根目录,webpack.config.js

搞定！

如果直接使用webpack这个命令的话，webpack会直接在项目根目录去寻找webpack.config.js文件，它作为默认的配置去运行

使用--config 默认配置文件名，例如

webpack --config webpack.dev.config.js

即可完成打包

npm info webpack

当然也可以使用npm info 查看其它安装包历史版本信息

就是让开发者可以在命令行中webpack命令，假设不安装webpack-cli这个包，那么就没有办法在
命令行运行webpack或者npx webpack这样的指令，

If not set, webpack sets production as the default value for mode.

module.exports = {
    mode: 'development',
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname + '/dist/js'),
        filename: "bundle.js"
    }
}

模块不止js，也还包括css，图片等等....

style-loader 将模块的导出作为样式添加到 DOM 中

css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码


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

打包后的css代码会到压缩后的js文件中

因为loader的加载顺序是从右往左,从下到上

sass-loader stylus-loader less-loader 具体看文档

{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // 将 JS 字符串生成为 style 节点
    }, {
        loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
    }, {
        loader: "sass-loader" // 将 Sass 编译成 CSS
    }]
}

查询参数 importLoaders，用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。

{
  loader: 'css-loader',
  options: {
    importLoaders: 1 // 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
  }
},

避免全局样式污染

这样引入css文件
import styles from '../css/style.scss' 

不再这样引入
import '../css/style.scss' 

使用
style.样式名

配置modules:true

 {
    loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
    options: {
        importLoaders: 0,
        modules: true,
    }
},

注意：css模块化还需要具体看一下

如果多个入口文件可以像如下配置：

 entry: {
    main: './src/js/main.js',
    sub: './src/js/main.js',
},

output: {
    path: path.resolve(__dirname + '/dist/js'),
    filename: "[name].js"
},


输出解析文件的目录，url 相对于 HTML 页面：

output: {
    publicPath: "http://www.baidu.com",
},

方法一：

在之前在package.json中设置启动项的地方增加--watch:

"dev": "webpack --config webpack.config.js --watch"

 devServer: {
    contentBase:'./dist/js',
},

随后重新命令行打包再修改文件就可以实现自动编译更新了,但是以上解决方案需要每次修改后自己刷新页面才会看到最新内容

方案二：

实现效果期望：第一次运行npm run dev就可以实现自动更新打包，自动打开浏览器且不需要手动刷新浏览器还可以开启http服务器可以发送ajax请求：

使用webpack-dev-server实现

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.config.js --watch",
    "watch": "webpack-dev-server"
},
  
 devServer: {
     contentBase: path.join(__dirname, "dist/js"),
     open: true,  //自动打开浏览器并且指定端口号
    port: 3000 //修改默认端口号
 },
 
 之后运行 npm run watch就可以实现以上效果了
 
 注意：webpack5.2.0中"webpack-cli默认和webpack-dev-server不兼容，将webpack-cli版本修改为"webpack-cli": "^3.3.12"重新安装更新即可

webpack-dev-server状态下还是会对代码进行打包的，但是打包生成的文件并不会放在dist目录下了，而是放到了电脑的内存中了，这样可以有效提升打包速度，提升开发效率

devServer: {
    contentBase: path.join(__dirname, "dist/js"),
    open: true,
    hot: true,//开启热模块替换
    hotOnly: true,//启用不刷新页面的热模块替换(参见devServer.hot)，作为构建失败时的回退。
},

用于将 ES6+版本的代码转换为向后兼容的 JavaScript 语法

使用：
npm install --save-dev babel-loader @babel/core

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

....

具体查看官方文档：https://www.babeljs.cn/setup#installation

但是只使用babel是不够的，
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

import '@babel/polyfill'

...

参考自：https://www.jianshu.com/p/67dedc89b13d

但是使用babel-polyfill之后，它会将没有使用到的ES6+的语法转化也都打包到里面了，导致打包文件很大，如何处理呢？

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "usage"//设置这个就可以开启按需转义了，打包之后的文件也会很小，使用它的时候也不需要再在每个需要使用转义的文件定义引入import '@babel/polyfill'
      }
    ]
  ]
}

babel 在转译的过程中，对 syntax 的处理可能会使用到 helper 函数，对 api 的处理会引入 polyfill。

默认情况下，babel 在每个需要使用 helper 的地方都会定义一个 helper，导致最终的产物里有大量重复的 helper；引入 polyfill 时会直接修改全局变量及其原型，造成原型污染。

@babel/plugin-transform-runtime 的作用是将 helper 和 polyfill 都改为从一个统一的地方引入，并且引入的对象和全局变量是完全隔离的，这样解决了上面的两个问题。

通常：打包业务代码使用@babel/polyfill,打包库文件使用plugin-transform-runtime

@babel/preset-react

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage"
      }
    ],
    [
      "@babel/preset-react"
    ]
  ]
}

>https://babeljs.io/docs/en/babel-preset-react#docsNav

只打包引用的代码，没使用到的代码不被打包

如一个文件导出one、two两个方法，然后其他文件只使用了one方法，那如果不使用tree shaking的时候，one、two两个方法都会被打包进去，
但是如果使用了tree shaking，就会只打包使用了的one方法。

注意：tree shaking只支持es module的引入，其他像commonjs方式引入的模块不被支持，因为es6 模块是静态引入，而comonjs模块是动态引入，
而tree shaking只支持静态引入。


如何实现：

在webpack配置文件中新增optimization属性，然后赋值对象为以下属性：

optimization: {
    usedExports: true
}

注意：生产模式下将自动开启tree shaking，开发环境需要自己设置，因此生产模式不需要设置以上

分别写两套配置文件：如：

webpack.dev.js  webpack.prod.js

然后在packag.json中指定：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
},

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: "development",
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        open: true,
        hot: true,
    },
    devtool: "eval-cheap-module-source-map",
    entry: {
        main: './src/js/main.js',
    },
    output: {
        path: path.resolve(__dirname + '/dist'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: '../images/',
                        limit: 2048
                    }
                }],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader" // 将 JS 字符串生成为 style 节点
                    },
                    {
                        loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                    }
                ]
            },
            {
                test: /\.(eot|woff|ttf|svg)$/,
                use: [{
                    loader: "file-loader"
                }],
            },
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, './dist')] // 清除的文件/文件夹
        }),
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    optimization: {
        usedExports: true
    }
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const path = require('path');

module.exports = {
    mode: "production",
    devtool: "cheap-module-source-map",
    entry: {
        main: './src/js/main.js',
    },
    output: {
        path: path.resolve(__dirname + '/build'),
        filename: '[name].js'
    },
    module: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: '../images/',
                        limit: 2048
                    }
                }],
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader" // 将 JS 字符串生成为 style 节点
                    },
                    {
                        loader: "css-loader", // 将 CSS 转化成 CommonJS 模块
                    }
                ]
            },
            {
                test: /\.(eot|woff|ttf|svg)$/,
                use: [{
                    loader: "file-loader"
                }],
            },
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, './build')] // 清除的文件/文件夹
        })
    ]
}

使用webpack-merge

module.exports = merge(commonConfig, devConfig)  ,上述粘贴代码已经实现

什么是代码分割：

它可以让代码分割到不同的文件，代码分割和webpack无关，它是单独一个概念，用来提升整个项目的性能。

webpack中实现代码分割的方式：

方式一：

同步代码，只需要在webpack.common.js中做optimization的配置即可

optimization: {
    usedExports: true,
    splitChunks: {
        // include all types of chunks
        chunks: 'all' //这里配置
    }
}

方式二：

异步代码分割：异步代码指的是import这种语法，动态导入的组件或者模块的代码，对于这种代码无需做任何配置，它会自动进行代码分割，放置到新的文件中。

webpack 代码分割，底层使用了 SplitChunksPlugin 插件

通过import异步加载模块实现懒加载，它是es中的概念；

懒加载好处：

可以让页面加载速度变快，如初始化页面时用不到lodash，那么只加载需要的模块就好了，lodash不会初始化就被载入，页面初始化渲染速度更快。

> https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules

//...
import(/* webpackPrefetch: true */ 'LoginModal');

等待核心代码加载完成之后，空闲时间再去加载懒加载的资源，使用上述可以提升性能

webpack可以自动打开浏览器，但是不能自动刷新页面

看文档

output: {
    path: path.resolve(__dirname + '/build'),
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
},

使用contenthash，如果文件没改动那么打包之后的对应文件contenthash值是一样的，但是如果改动了，
打包之后的hash是不同的，浏览器看到不同文件名称就会重新请求，相同文件名称使用本地缓存。

如果使用第三方比较老的插件，比如jquery，那么引入的时候还不想每个页面挨个导入，那样可以使用如下方式：


 new webpack.ProvidePlugin({
    $: 'jquery'
})

以上方式之后就可以页面中使用jquery

webpack --env.NODE_ENV=local --env.production --progress

webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true
  ......
  ,,,,,,

https://github.com/TypeStrong/ts-loader

devServer.proxy

 const data = axios.get('/react/api/header.json')
 
 devServer: {
     contentBase: path.join(__dirname, "dist"),
     open: true,
     hot: true,
     proxy: {
         '/react/api': 'http://www.dell-lee.com'
     },//此处做代理
 },
 
以上发送的请求路径就是：http://localhost:8082/react/api/header.json
但是实际上是：http://www.dell-lee.com/react/api/header.json

但是后端使用某个接口是测试接口之后名称会改变，那前端如何处理呢？

如上面 /react/api/header.json  中的header在测试中用的test，那么可以像下面这样写

proxy: {
    '/react/api': {
        target: 'http://www.dell-lee.com',
        pathRewrite: {"^header.json": "demo.json"}
    }
},

以上发送的请求路径就是：http://localhost:8085/react/api/demo.json
但是实际上是：http://www.dell-lee.com/react/api/header.json


以上配置只是开发时候设置的转发，生产环境没设置dev-server

<BrowserRouter>
    <Route path='/' exact component={Home}/>
    <Route path='/list' exact component={List}/>
</BrowserRouter>

但是上面只能匹配根目录，list匹配报错：Cannot GET /list

如何解决：

https://www.webpackjs.com/configuration/dev-server/#devserver-historyapifallback

proxy: {
    '/react/api': {
        target: 'http://www.dell-lee.com',
        pathRewrite: {"header.json": "demo.json"}
    }
},
historyApiFallback: true, //这块设置即可

代码检查与修复工具

配置eslint有两种方式，一种是在编辑器中直接配置，另一种在代码中配置

代码中配置方式：

eslint和eslint-loader结合使用

提升webpack打包速度的方法：

1、技术的更新迭代（node/npm/yarn）

2、尽可能少的模块上应用loader

比如babel-loader  
{
    test: /\.js$/,
    exclude: /node_modules/,//抛除安装包下的或者使用include，只对include匹配的转换
    loader: "babel-loader"
},

就是合理的使用exclude或者include可以降低loader执行频率，提升打包速度

3、尽可能少的使用plugin，并且确保plugin的可靠性

（1）比如对css进行代码压缩只是在生产版本配置，开发版本不配置，从而节约开发时每次打包时间

（2）另外一般使用的plugin都是webpack官方提供的，因为这些插件的性能经过官方测试是比较快的，
平时个人写的插件可能会解决打包时候的问题，但是这些插件的性能没法保证，因此最好使用官方推荐的插件

4、resolve参数合理配置

module.exports = {
entry: {
    main: './src/js/main.js',
},
resolve: {
    extensions: ['.js', '.jsx'],//导入文件可以省略这两个扩展名，然后自动先查找.js文件在查找.jsx文件
},

但是上述这样是合理的，不过如果在上述配置项中配置很多内容，那么每次都会进行很多文件查找，每次文件查找都会掉一次node底层这种操作，
会有性能损耗，因此只有引入js或者jsx这种逻辑文件的时候才会省略扩展名配置在这里，css和图片扩展名都不建议配置在这里

也可以给它添加别名：

resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            assets: path.resolve(__dirname, 'src/assets')
        }
    },

5、控制包文件大小

1、使用Tree Shaking只打包使用的代码
2、使用splitChunks代码拆分
3、合理使用source-map，不同环境打包使用不同source-map
4、结合status分析打包结果