20190510 webpack基础

最新推荐文章于 2023-07-06 00:34:03 发布

时光之里

最新推荐文章于 2023-07-06 00:34:03 发布

阅读量286

点赞数 1

分类专栏： webpack 大前端文章标签：解决webpack加载缓慢的问题优化webpack的编译速度 webpack配置多入口 path.resolve(__dirname 'dist')

本文链接：https://blog.csdn.net/m_review/article/details/71189310

版权

13 篇文章 2 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

现代JavaScript应用程序静态模块打包工具。

webpack处理应用程序的时候会在内部构建一个依赖图，映射项目所需的每个模块，生成一个或者多个bundle

核心概念：入口、输出、loader、plugin、模式、

作用：告诉 webpack 应该使用哪个模块作为内部 依赖图 的开始起点。

单入口简单语法

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

多入口对象语法

module.exports = {
  entry: {
    app: "./src/app.js",
    adminApp: "./src/adminApp.js"
  }
};

作用：告诉 webpack 在哪里输出他所创建的 bundle。

默认值：./dist/main.js

单个入口输出文件

module.exports = {
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

多个入口起点输出文件名称使用 占位符

module.exports = {
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, "dist")
  }
};

作用：确保每个文件具有唯一的名称

path.resolve(__dirname, 'dist')
- path 是 node 中的内置对象
- path.resolve 是将路径或者路径片段序列解析成绝对路径
- __dirname 指的是当前模块文件所在的完整路径
缓存 hash

作用：转换其他类型的模块，让 webpack 能够去处理除了 JavaScript 和 JSON 类型的其他类型文件。

比如：css、less、图片、字体、XML 等文件

方法：在 module.rules 中配置数组，数组每一项都有 test 和 use

module.exports = {
  module: {
    rules: [{ test: /\.(jpg|png|gif|svg)$/, use: ["file-loader"] }]
  }
};

原理：告诉 webpack 当碰到引入’.jpg’ 文件类型的时候，先使用 file-loader 转换一下。

作用：执行更广泛的任务；包括：打包优化、资源管理、注入环境变量等。

举例：

module.exports = {
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })]
};

使用 html-webpack-plugin 这个插件为应用程序生成一个 HTML 文件，并且自动注入所有的 bundle

作用：通过选择 development、production、none 来启用 webpack 在相应的环境下的内置的优化

默认值：production

加载缓慢是指用户用户访问网站后长时间无法显示主要内容和页面

使用插件整合第三方类库

因为如果不整合的话，每次编译webpack都会重新处理页面中模块的引用关系
所以我们通过CommonsChunkPlugin插件去整合类库。
对第三方类库进行预编译

因为，通常类库的代码是不经常变动的，但是webpack每次编译都会去处理这些类库，导致效率很低
所以，我们可以通过插件DllPlugin对类库进行预编译，在需要的时候直接引用编译的结果就好了。
开发环境下关闭不必要的Plugins

比如说：对JS进行压缩的或者对CSS进行提取的uglifyjs-webpack-plugin、extract-text-webpack-plugin
生产环境下关闭source-map源映射

作用：能在编译后的代码中迅速找到对应的源代码的位置

他非常影响代码的编译速度，在生产环境中，我们没有必要在线上追踪调试错误

所以，生产环境的source-map是没必要开启的