webpack打包详解

转载

mb5fd8698f60f87 2021-07-25 16:31:00

文章标签 html 开发环境生产环境开发效率 css 文章分类 Webpack 前端开发

Webpack

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

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

模块打包：将不同模块的文件打包整合在一起，按照引用的树状形状来进行模块打包，保证项目的清晰度
编译兼容：将浏览器不能识别的语言通过loader机制转换，提高开发效率
打包优化：在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，提高打包输出的质量

2.Webpack核心概念

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

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

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

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
            }
          }
        ]
      }
    ]
  }

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

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

HMRHot 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' //开发环境下使用 }