webpack的使用方法

今天我们来学习webpack

 

 

 

 

---

---

webpack：

webpack是近期最火的一款模块加载器兼打包工具，它能够把各种资源，例如JS（含JSX）、样式（含less/sass）、图片等都作为模块来使用和处理。

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

 

 

 

首先我们打开官网WebPack

webpack有几个核心概念：

• 入口：

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src

• 出口：

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程

• loader：

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

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

• 插件(plugins)：

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

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

 

打开VS Code，打开你的项目，用npm init初始化项目

然后我们可以直接使用 npm i webpack webpack-cli -D来进行本地安装

-S：安装到上线环境
-D：安装到开发环境
-g：安装到全局
-i：install（等同）

安装好之后我们可以看到package.json记录了开发环境

我们的webpack作为一个库安装到了node_modules（注意这里是本地的，不是全局的），为了让局部使用，我们再package.json中改变一下scripts：

  "scripts": {
    "build":"webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

然后npm run build后，我们就会发现出现了以下报错提示：

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

原来是mode没有设置，我们再修改scripts：

  "scripts": {
    "build":"webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

设置模式为production后，刚才的黄色提示就不见了

这个就是模式问题：通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production，最直观的区别就是production下的dist/main.js的代码会被压缩，development不会。

接下来webpack需要一个入口，就是./src，webpack的默认入口就是src/index.js

我们建立src目录，再建立index.js，这就是我们webpack的入口。我们在没有什么改变的情况下，webpack会自动去查找src/index.js，然后记录信息到dist/main.js。

 

 

---

手动修改配置：

那么如果我们想修改配置怎么做，比如让它不要把信息记录到main.js，又或者是别的需求

我们来新建一个根目录的文件，叫 webpack.config.js （默认情况别改名）

这个文件是对外暴露webpack的配置，每次运行webpack会读取这个文件，然后根据里面的配置打包，若想要修改webpack.config.js的名称及路径，请在package.json的”scripts”的”build”内容里加上”–config /test/configTest.js”，及修改配置文件到了/test/configTest.js位置了

我们在这个 webpack.config.js 中加人 代码：

//这是一个nodejs的脚本文件，可以使用nodejs的模块
const path=require('path');

module.exports={
    entry:'./src/testIn.js',
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'testOut.js'
    }
}

如上所示，改变了webpack的入口与出口，即入口文件成了./src/testIn.js，出口文件成了 ./dist/testOut.js

上面的 entry:'./src/testIn.js',也等于于这种写法：

     entry:{
          main:'./src/testIn.js'
     },

入口可以有多个，我们还可以这样：

     entry:{
          main:'./src/testIn.js',
          about:'./src/about.js'
     },

用设置对象的方法设置entry（入口）后，则会将入口的这个json对象的key当作出口名，例如上面设置好入口了，则运行后我们就会在dest目录下看见看见两个文件：main.js和about.js，main.js记录的就是TestIn.js的信息，about记录的就是about.js的信息，这时后给它指定出口就会保错。

有的时候我们需要给打包的文件名加上一些哈希值，这样我们要怎么去做呢？我们给可以用中括号加name作为出口，从而对这个变量处理

//这是一个nodejs的脚本文件，可以使用nodejs的模块
const path=require('path');

module.exports={
    entry:{
        home:'./src/home.js',
        about:'./src/about.js'        
    },
    
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'[name].js'
    }
}

结果还是输出到home.js、about.js这两个文件，那么我们要想给文件加个哈希值，可以直接这样：

//这是一个nodejs的脚本文件，可以使用nodejs的模块
const path=require('path');

module.exports={
    entry:{
        home:'./src/home.js',
        about:'./src/about.js'        
    },
    
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:'[name].[hash].js'
    }
}

 

---

如果 [hash] 变为 [hash:n] 则会截断取前n位，从而更加舒适

这种哈希方法是作用于整个webpack的编译过程，所有的东西都是一样的哈希值。我们可以将 [hash] 变为 [chunkHash] （也可以加:n截断）来让每个文件有不一样的哈希值

 

 

 

 

 

 

 

商业转载 请联系作者获得授权，非商业转载 请标明出处，谢谢