webpack打包详解

Webpack

1.为什么要使用webpack打包工具？

webpack不仅可以让我们编写模块，而且还支持任何模块格式，并且可以同时处理资源，带来良好的开发体验以及提高了打包效率。

模块打包：将不同模块的文件打包整合在一起，按照引用的树状形状来进行模块打包，保证项目的清晰度
编译兼容：将浏览器不能识别的语言通过loader机制转换，提高开发效率
打包优化：在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，提高打包输出的质量
之前的手动打包，每次的切换环境都需要自己手动切换环境，（开发，测试，预发，线上），容易造成不必要的问题

2.Webpack核心概念

entry

用法：entry: string|Array<string>

表明webpack应该使用哪个模块来作为构建内部依赖图的开始,可以设置为单入口或多入口

  entry: {
    main: {
      import: [
        isEnvDevelopment && path.resolve(paths.appSrc, 'react-refresh.js'),
        path.resolve(paths.appSrc, '_polyfill.js'),
        path.resolve(paths.appSrc, 'performance.js'),
        resolveApp('src/index.js') // 入口文件
      ].filter(Boolean)
    }
  },

此时是向entry属性传入一个数组，将创建多个主入口。

output

可以控制 webpack 如何向硬盘写入编译文件

即使是多入口起点，但是只能有一个输出配置

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};
// 此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中
module.exports = config;

  output: {
    path: path.join(paths.appBuild, 'admin'),
    filename: isEnvProduction
      ? 'js/[name].[contenthash:6].js'
      : isEnvDevelopment && 'js/[name].bundle.js',
    chunkFilename: isEnvProduction
      ? 'js/[name].[contenthash:6].chunk.js'
      : isEnvDevelopment && 'js/[name].chunk.js',
    publicPath: '/'
  },

const path = require('path');

module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};

mode 根据mode的不同， webpack 使用相应模式的内置优化用法：

1.在配置中使用mode进行配置

2.从cli参数中传递 (一般可通过设置变量来选择开发环境还是生产环境) development ：会将 process.env.NODE_ENV 的值设为 development production：会将 process.env.NODE_ENV 的值设为 production production（生产环境）：启动内置优化插件，自动优化打包结果，打包速度偏慢 development (开发环境) ：自动优化打包速度，添加一些调试过程中的辅助插件以便于更好的调试错误

loader webpack本身只了解javascript,通过loader可以将所有类型转换为webpack进行处理的有效模块 loader是从下向上(从右向左)进行解析的，已经解析过的将解析过的内容传给下一个use进行解析 loader机制实现特殊资源加载，管理项目中各种文件。

 module: {
   rules: [
    {
       test: /\.css$/,
       use: [
        { loader: 'style-loader' },
        {
           loader: 'css-loader',
           options: {
             modules: true
          }
        }
      ]
    }
  ]
}
// 这里所做的就是：遇到css后缀的文件，就use,loader转换一下

loader特性：

链式调用：当一个use,有多个loader时，根据链式的方式，通过第一个loader转换后，将转换结果传给下一个loader，直到最后一个，将结果返回。

// 扩展一下，css,less,sass/scss有什么区别？以及为什么需要使用css的扩展语法？

less,sass,scss都是css预处理语言。

css预处理器就是为css增加了一些编程思想

开发时用预处理语言，在打包上线时，用webpack再配合loader工具给转成css给浏览器使用。

scss的语法：

1.可以使用$来标识变量

$highlight-color: #ffffff;
$basic-border: 1px solid black;

#app {
    background-color: $highlight-color;
    border: $basic-border;
}

2.可以使用嵌套语法

.id{
  .class {
    color:red;
   }
}
// 原生的话
.id{}
.id .class {}

3.使用&选择去

  a{
    color:blue;
    &:hover{
      color: red;
    }
  }

4.模块化

可以通过import 来进行模块化的引入

less:

1.变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

2.混合（Mixins）

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

3.嵌套

4.运算

5.转义（任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出）

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}
// 编译为：
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

参考文档：https://less.bootcss.com

plugins 插件主要用于打包优化 //首先引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin');

HMR Hot Module Replacement在应用程序运行过程中替换、添加、删除模块，而无需重新加载整个模块优点：节约开发时间、快速调整样式

watch:监视模式 使用npm全局安装browser-sync模块，然后再使用该模块在修改完代码后不用重新运行打包机制，可以自动进行修改，刷新浏览器就可

webpack dev-server 由webpack官方推出，它将自动编译和自动刷新浏览器等一系列对开发友好的功能集成在一起不用在磁盘中读取数据，通过webpack构建----内存----http server

sourceMap 打包后的文件具有较低的阅读性，一旦有错误很难定位解决。sourceMap 可以帮助我们快速定位到源代码的位置，提高我们的开发效率。 sourceMap不是webpack独有的特性，而是webpack支持soueceMap //webpack.config.js module.exports = { devtool: 'cheap-module-eval-source-map' //开发环境下使用 }

参考文档：https://www.webpackjs.com/

ps:

const isEnvDevelopment = process.env.NODE_ENV === 'development';
const isEnvProduction = process.env.NODE_ENV === 'production';
// 为什么通过process.env上的属性就可以区分

// 在运行的时候通过NODE_ENV=production来进行自行绑定
// 在 Node.js 中，有一个全局变量 process ，它在属性 process.env 对象中暴露了系统的环境变量。