webpack笔记

webpack笔记

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 自身只理解 JavaScript

安装

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

基本使用

webpack会解决代码对浏览器的兼容性，使我们更好的专注于功能的实现

mode使用development开发模式，不会进行代码的压缩，耗时短

mode使用production生产模式，会进行代码的压缩，耗时长

所以最后要上线的时候，我们要将mode修改成生产模式

webpack-dev-server

webpack-dev-server有个Bug,生成输出文件是放在内存中的，它的路径是根目录‘/’而不是‘/dist’，所以在文件的引用中，需要引用/main.js或者自定义的名字

html-webpack-plugin

html-webpack-plugin不仅能初始化页面【将原index.html文件复制到根目录下】

，而且还会往新文件自动加入脚本

当源文件删除了之后，依然正常执行【也就是说源文件就不需要引用了，因为这个插件都帮我们做好了】

devServer节点

css-loader

less-loader

url-loader/file-loader

可以将图片转换成base64格式【图片大小小于limit】，好处是减少了请求服务器资源的次数，安全！

babel-loader

一定要排除node_module中的js文件，提高效率。程序员只需要管自己的js文件即可

build-打包发布

统一打包JS文件到同一目录

统一打包图片文件到同一目录【base64格式的不会被打包】

【base64格式的不会被打包，只有大于limit的图片才会被打包，并不会压缩，就是换个文件夹】

第二种不推荐

clean-webpack-plugin:自动删除旧dist

【PS：webpack5.4+ 在output中直接加入clean:true即可】

Source-Map-开发阶段建议开启

当我们调试报错的时候，提示报错源的位置，实际上是dist中的行数，而不是我们自己写的代码的行数，

所以要使用这个给插件使得他们关联起来，可以直接定位到源码的错误行

在开发调试阶段，建议开启Source Map使得，源码和生成的压缩代码【dist中的】有了对应关系，可以直接找到源码的错误行

但是发布阶段，我们需要省略这个选项，或者删掉，或者注释掉，为了安全，防止他人直接定位到错误行

@表示源代码目录【src目录】在resolve中注册

但是要配置webpack.config.js

但它模块化提供了很多语言的支持

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) 模块，并且在 bundle 中引入这些依赖。 webpack 社区已经为各种流行语言和语言处理器构建了 loader，包括：

• CoffeeScript
• TypeScript
• ESNext (Babel)
• Sass
• Less
• Stylus

入口(entry)-内部依赖图的路口

入口就是主函数所在的文件的路径！！！

表明了webpack的打包起始文件路径（可以是数组的形式，也就是多个打包起始文件）

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

出口(output)

表明了webpack的输出文件路径和文件名

const path = require('path');//这个path是Node.js的核心模块

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

loader-处理非javascript的文件

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

loader 能够 import 导入任何类型的模块（例如 .css 文件），这是 webpack 特有的功能

在 webpack 的配置中 loader 有两个目标：

1. test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

2. use 属性，表示进行转换时，应该使用哪个 loader。

   在 webpack 配置中定义 loader 时，要定义在 module.rules 中如下：

//webpack.config.js
const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
        //所有后缀为.txt的文件都用raw-loader编译
      { test: /\.txt$/, use: 'raw-loader' },
   //若有多个use，从后往前调用loader工具，是都要使用到！！！不是只使用一个
      { ts:/\.css$/,use:['style-loader','css-loader']}
    ]
  }
};

module.exports = config;

webpack 编译器「在遇到 require()/import 语句中被解析为 '.txt' 的路径」时，在对它打包之前，先使用 raw-loader 进行转换！

导入CSS文件-css-loader,style-loadder

如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

//style.css
body {
    background: yellow;
}

//两种方法
//:runoob1.js   提前加入前缀
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
webpack runoob1.js bundle.js


//:runoob1.js  打包的时候选择合适的编译器
require("./style.css");
document.write(require("./runoob2.js"));

webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'

webpack.config.js

我们可以将一些编译选项放在配置文件中，以便于统一管理

这样我们打包命令只需要输入webpack即可，不需要对每个类型的文件做判断，选择合适的编译器

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

插件(plugins)-用于完成一些 loader 不能完成的工作。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

//webpack.config.js
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;

模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

module.exports

用于给外界import的输出对象/内容

若内容较多可以封装成一个对象，然后直接module.exports=对象名

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

若内容较少可以使用

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

注意！！！

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：

// webpack.config.js
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
//「在遇到 `require()`/`import` 语句中被解析为 '.txt' 的路径」时,使用vue-loader进行转换
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}