webpack_webpack merge-CSDN博客

本文链接：https://blog.csdn.net/Her_smile/article/details/81629255

webpack4.0以上可以无任何配置的使用webpack, 但是对于大项目，我们往往需要使用配置文件，如果根目录存在webpack.config.js，那么webpack命令将默认使用它，但是也可以自定义配置文件名，并使用npx webpack --config 配置文件命来运行，但是在开发中我们一般使用npm的script脚本命令来运行，可以代替npx的作用,例如

    script: {
        "build": "webpack"
    }

webpack管理资源：通过在配置文件的module的rules当中配置多个规则，对于不同的文件后最使用不同的loader，这样就可以在js文件中引入其他类型的文件使用像css-loader和style-loader允许你在js中引入css，并且在该模块运行的时候，自动将<style>标签插入<head>标签对于webpack 处理json的LoaderJSON 支持实际上是内置的
webpack管理输出: 通常会使用一些插件，来优化打包过程。webpack的配置文件里面的entry代表入口，也就是我们要生成的bundle，如果配置多个入口就会生成多个入口文件，然后我们可以在index.html里面引用，但是如果我们改变入口文件的的名字，那么我们的index.html的文件名也要改变, 为了更好的开发，我们可以使用插件(HtmlWebpackPlugin),它会生成自己的html文件，并且添加所有的依赖文件，并且在每次build的时候清空dist文件夹，放入我们只会用到的bundle,我们可以使用clean-webpack-plugin插件。
配置文件中的output，是用来配置我们的输出bundel名字的

开发: webpack对于我们的开发也很有帮助，例如我们可以使用source-map来追踪我们的代码(因为最终我们的代码会被打包到一个或者几个文件里面，无法追踪错误到底是发生在哪一个源文件里面，这个时候就可以使用source-map，在配置文件里面加入一行devtool: 'inline-source-map')，又例如我们可以使用Watch Mode来实时编译代码(在package.json的script中加入"watch": "webpack --watch")，又或者我们可以使用webpack-dev-server(集成了webpack-dev-middleware和服务器)来实现实时编译代码和自动刷新页面等等

热替换: 它允许在运行时更新各种模块，而无需进行完全刷新，我们可以手动修改代码，但幸运的是，存在很多 loader，使得模块热替换的过程变得更容易。例如css-loader当更新 CSS 依赖模块时，此 loader 在后台使用 module.hot.accept 来修补(patch) <style> 标签。
tree shaking: 抖动树,意思就是当我们在打包的时候，去掉我们export或者import但是没使用的部分，这样可以精简我们的bundle，把配置文件里面的mode改为"production"，这样会启用 webpack内置的uglifyjs 压缩插件
构建生产环境: 一般来说我们分别给开发环境和生产环境分别配置不同的配置文件，并且将它们共有的部分提出来放到共有文件里面，然后在开发环境和生产环境里面使用webpack-merge这个库将公有库合并进来。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。自从webpack4开始，我们只需要指定mode字段，它就会自动配置DefinePlugin这个插件。然后我们就可以在package.json中分别配置启动生产环境和开发环境的命令，使用--config加上我们的配置文件名就ok

代码分离: 此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件,如果使用合理，会极大影响加载时间。有三种常用的代码分离方法：

   入口起点：使用 entry 配置手动地分离代码，但是会有不同bundle重复引用的问题
   防止重复：使用 CommonsChunkPlugin 去重和分离 chunk，这个插件会将共有的包提取出来单独放到一个bundle里面
   动态导入：通过模块的内联函数调用来分离代码。使用import() import会返回一个promise对象，例如我们要引入loadsh，可以像下面这样写

     function getComponent() {
       return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
            /使用loadsh/
       }).catch(error => 'An error occurred while loading the component');
      }

懒加载: 所谓的懒加载就是按需加载，即在页面当中我们不一次性全部加载完所有的资源，而是按需加载，当需要某些资源的时候再使用es6的import() 来动态加载例如下面的button的点击事件，当触发该点击事件的时候，我们再去加载里面需要的资源

               button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
                 var print = module.default;
                 print();
               });