webpack4(01)

Posted 2021-02-16 xqzi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack4(01)相关的知识，希望对你有一定的参考价值。

安装

前提条件

在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的==长期支持版本==(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。

本地安装 or 全局安装

全局安装

以下的 NPM 安装方式，将使 webpack 在全局环境下可用：

npm install --global webpack

==不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败==。

全局安装

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev [email protected]<version>

使用 webpack 4+ 版本，你还需要安装 ==CLI(命令行接口)==,为了更合适且方便地使用配置，可以在配置文件中中对 webpack 进行配置。CLI 中传入的任何参数会在配置文件中映射为对应的参数。

npm install --save-dev webpack-cli

起步

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack， webpack-cli：

mkdir webpack-demo && cd webpack-demo
npm init -y //初始化package.json
npm install webpack webpack-cli --save-dev

运行以下命令

npx webpack

npx 是npm 5.2新增的命令，具体的就可以查看阮老师的文档，链接在这里。运行之后会出现如下错误

ERROR in Entry module not found: 
Error: Can't resolve './src' in 'C:UsersdullwinnieDesktopwebpack-demo'

从 webpack4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js，现在我们将创建以下目录结构、文件和内容：

project

  webpack-demo
    package.json
+   index.html
+   /src
+       index.js

index.js

console.log('qzy');

再次运行 npx webpack,成功后就可以在当前的根目录中得到打包的文件夹,也就是dist文件夹,并且里面包含了main.js。在文件的末尾我们是可以发现我们所写的js代码的。细心的朋友可能发现了，刚才的命令行中报了一个警告

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/concepts/mode/

webpack4 可以0配置，但是此时的配置很弱，所以开发中我们常常需要自己配置。

使用配置文件

webpack.config.js

新建一个webpack.config.js文件

    webpack-demo
        package.json
+       webpack.config.js    
        index.html
        /src
            index.js

webpack.config.js

const path = require('path');
module.exports = {
    mode: 'development', // development 开发环境  、production 生成环境
    entry: './src/index.js', // 需要打包文件的入口
    output: {
        filename: 'bundle.js',//打包后的文件名字
        path: path.resolve(__dirname, 'dist') // 必须是绝对路径     
    }
}

每次运行前，先删除dist文件夹。运行 npx webpack 命令,dist文件夹下会生成bundle.js文件，此时文件的内容也与配置文件值之前有所区别，因为此时我们的mode是开发环境。

webpackfile.js

我们也可以使用webpackfile.js文件进行webpack的配置,这个我们可以在node_moduleswebpack-cliin的config-yargs.js文件中找到如下代码

defaultDescription: "webpack.config.js or webpackfile.js",

所以我们将上面的配置文件名改成webpackfile.js 并将打包后的文件名修改成bundlefile.js进行区分。

filename: 'bundlefile.js', //打包后的文件名字

再次运行，效果与上面是一致的。

webpack --config

假如不用上面默认的配置文件名，自己取一个例如my.config.js 可以吗？这个也是可以的。
我们将上例子的webpackkfile.js文件名修改为my.config.js。并将打包后的文件名修改成bundlemy.js进行区分。

filename: 'bundlemy.js', //打包后的文件名字

此时在运行时，我们需要运行如下命令

npx webpack --config my.config.js

再次运行，效果与上面是一致的。
但是每一次我们打包都需要写一大串,有什么办法可以避免呢。

NPM 脚本(NPM Scripts)

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
+   "build": "webpack --config my.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0"
  }
}

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。
上面的例子中我们只是打包了js文件，我们尚未引用，下面我们引用一下,我们对目录做如下修改

project

webpack-demo
    dist
        bundlemy.js
+       index.html
    package.json
    my.config.js   
-   index.html
    /src
        index.js

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webpack-demo</title>
    </head>
    <body>
    </body>
    <script src="./bundlemy.js"></script>
</html>

现在我们是手动引入文件，假如文件名时刻都在变化，我们每次引入不是很麻烦嘛？我们引入一个插件解决此问题

管理输出

HtmlWebpackPlugin

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

安装

npm install --save-dev html-webpack-plugin

基本用法

    const path = require('path');
+    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        mode: 'development', // development 开发环境  、production 生成环境
        entry: './src/index.js', // 需要打包文件的入口
        output: {
+            filename: 'bundle.js', //打包后的文件名字
            path: path.resolve(__dirname, 'dist') // 必须是绝对路径     
        },
+       plugins:[
+           new HtmlWebpackPlugin()
+       ]
    }

删除dist文件，打包后，这将会产生一个包含以下内容的文件 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

会自动帮我们引入生成的文件。插件中有很多配置项，具体的可以看这篇文章,链接在这里

以上是关于webpack4(01)的主要内容，如果未能解决你的问题，请参考以下文章

01webpack4 快速上手

webpack4-01

webpack4(01)

webpack丨鼓捣鼓捣webpack4.x（01基础版）

webpack4生猛升级