Webpack 4.X 从入门到放肆

作者: 吴佳浩 | 来源:发表于2018-12-21 18:53 被阅读0次

webpack 4：从零配置开始

  mkdir webpack-4.X && cd $_

完成之后进入创建好的文件夹，完成以下操作

2、通过运行以下命令初始化 `package.json` ：

 npm init -y

3、并引入 webpack 4：

npm i webpack --save-dev

4、我们还需要 webpack-cli ，作为一个单独的包引入：

npm i webpack-cli --save-dev

5、现在打开 `package.json` 并添加一个 `build`(构建) 脚本：

package.json 代码:

 "scripts":  {
 "build":  "webpack"
 }

6、关闭文件并保存。

尝试运行：

npm run build

看看会发生什么：

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: e22d9cbf4c86c79ab1fd
Version: webpack 4.28.0
Time: 157ms
Built at: 2018-12-20 09:40:10

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for thisvalue. 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/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/wujiahao/webTest/webpack-4.X'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-4.X@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-4.X@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/wujiahao/.npm/_logs/2018-12-20T01_40_10_578Z-debug.log

webpack 4 在 ./src 中寻找 entry point(入口点) ！如果您不知道什么是入口，请查看官方的说明文档。

简而言之： entry point(入口点) 是 webpack 寻找开始构建 Javascript 包的文件。

在以前版本的 webpack 中，必须在名为 webpack.config.js 的配置文件中通过 entry 属性定义 entry point(入口点) 。

但是 从 webpack 4 开始，不再必须定义 entry point(入口点) ：它将默认为 ./src/index.js ！

7、测试这个新功能很简单。创建 `./src/index.js`：

index.js 代码:

console.log(`I'm yi ge ru kou wen jian`);//调皮了一下

8、然后运行构建命令：

 npm run build

你将在 ~/webpack-4.X/dist/main.js 中获取该 bundle(包) 。

什么？稍等片刻。没有必要定义输出文件？对的。

在 webpack 4 中，既不必须定义 entry point(入口点) ，也不必须定义 output file(输出文件)。

webpack 的主要优势在于 code splitting(代码拆分）。但请相信我，使用零配置工具可以加快速度。

所以这是第一条新闻：webpack 4 不是必须要有配置文件。

它将查找 ./src/index.js 作为默认入口点。而且，它会在 ./dist/main.js 中输出模块包。

在下一节中，我们将看到 webpack 4 的另一个不错的功能：生产和开发模式。

webpack 4：production(生产) 和 development(开发) 模式

拥有2个配置文件在 webpack 中是的常见模式。

一个典型的项目可能有：

用于开发的配置文件，用于定义 webpack dev server 和其他东西
用于生产的配置文件，用于定义 UglifyJSPlugin，sourcemaps 等

虽然较大的项目可能仍然需要 2 个配置文件，但在 webpack 4 中，您可以在没有一行配置的情况下完成。

怎么会这样？

webpack 4 引入了 production(生产) 和 development(开发) 模式。

事实上，如果你注意 npm run build 的输出，你会看到一个很好的警告：

WARNING in configuration
The 'mode' option has not been set,
 webpack will fallback to 'production' for thisvalue.
 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/

警告在配置
“mode”选项还没有设置，webpack将返回到“production”。集
“开发”或“生产”的“模式”选项
为每个环境启用默认值。
您还可以将其设置为“none”，以禁用任何默认行为。了解更多信息:https://webpack.js.org/concepts/mode/

那是什么意思？让我们来看看。

打开 package.json 并填充 script 部分，如下所示：

package.json 代码:

"scripts":  {
    "dev":  "webpack --mode development",
    "build":  "webpack --mode production"
  }

现在尝试运行：

npm run dev

并看看 ./dist/main.js 。你看到了什么？是的，我知道，一个让人疑惑的 bundle(包) 文件…，并没有压缩的文件！

现在尝试运行：

npm run build

再来看看 ./dist/main.js 。你会看见一个 压缩后的 bundle(包)！

是的!

production mode(生产模式) 可以开箱即用地进行各种优化。包括压缩，作用域提升，tree-shaking 等。

另一方面，development mode(开发模式)针对速度进行了优化，仅仅提供了一种不压缩的 bundle 。

所以这是第二条新闻：webpack 4 引入了 production(生产) 和 development(开发) 模式。

在 webpack 4 中，您可以在没有一行配置的情况下完成任务！只需定义--mode 参数即可免费获得所有内容！

webpack 4：覆盖默认 entry(入口)/output(输出)

我喜欢 webpack 4 零配置，但如何覆盖默认 entry point(入口点) 和默认 output(输出) 呢？

在 package.json 中配置它们！

这是一个例子,输入的内容的文件夹和文件必须存在，输出的无所谓如下例./entry/src/js/index.js 这个入口文件必须存在：

package.json 代码:

1.  "scripts":  {
2.  "dev":  "webpack --mode development ./entry/src/js/index.js --output ./entry/main.js",
3.  "build":  "webpack --mode production ./entry/src/js/index.js --output ./entry/main.js"
4.  }

webpack 4：用 Babel 7 转译 Javascript ES6

吴佳浩的个人博客

现代 Javascript 主要是用 ES6 编写的。

但并非每个浏览器都知道如何处理 ES6 。我们需要某种转换。

这个转换步骤称为 transpiling(转译)。 transpiling(转译)是指采用 ES6 并使旧浏览器可以理解的行为。

Webpack 不知道如何进行转换但是有 loader(加载器) ：将它们视为转译器。

babel-loader 是一个 webpack 的 loader(加载器)，用于将 ES6 及以上版本转译至 ES5 。

要开始使用 loader ，我们需要安装一堆依赖项。尤其是：

babel-core
babel-loader
babel-preset-env 用于将 Javascript ES6 代码编译为 ES5

我们开始动手吧：

 npm i babel-core babel-loader babel-preset-env --save-dev
 npm i babel-loader @babel/core @babel/preset-env --save-dev

接下来，通过在项目文件夹中创建名为 .babelrc的新文件来配置 Babel ：

.babelrc 代码:

{
  "presets": [
    ["env",
      {
        "modules": false
      }
    ]
  ]
}

此时我们有2个配置 babel-loader 的选项：

使用 webpack 的配置文件
在你的 npm scripts 中使用 --module-bind

是的，我知道你在想什么。 webpack 4 将自己作为零配置工具推向市场。为什么要再次编写配置文件？

webpack 4 中零配置的概念适用于：

entry point(入口点) 默认为 ./src/index.js
output(输出) 默认为 ./dist/main.js
production(生产) 和 development(开发) 模式（无需为生产和开发环境创建2个单独的配置）

这就够了。但是对于在 webpack 4 中使用 loader(加载器)，您仍然需要创建配置文件。

webpack 4 中的加载器是否与 webpack 3 相同？有没有计划为像 babel-loader 这样的普遍使用的 loader(加载器) 提供零配置？

是的！

“对于未来（在v4之后，可能是4.x或5.0），我们已经开始探索预置或附加系统将如何帮助定义它。我们不想要的是:尝试将一堆东西作为默认设置插入到 core 中，我们想要的是:允许其他人扩展“

现在你仍然必须依赖 webpack.config.js。让我们来看看…

webpack 4：通过配置文件使用 babel-loader

给 webpack 添加一个配置文件，以最经典的方式使用 babel-loader。

创建一个名为 webpack.config.js 的新文件并配置 loader(加载器) ：

webpack.config.js 代码，但是如果你连基本的正则表达式都看不懂我建议你补一点再来看:

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env', { modules: false }]
                }
            }
        }
    ]
}

`除非您要自定义 entry point(入口点) ，否则无需指定它`。

接下来打开 ./src/index.js 并编写一些 ES6 代码：

index.js 代码:

 const arr =  [1,  2,  3];
 const ES6fn =  ()  => 
 console.log(...arr);
 window.ES6fn = ES6fn;

最后，创建 bundle(包)：

 npm run build

现在看一下 ./dist/main.js 来查看转换后的代码。

webpack 4：不通过配置文件使用 babel-loader（在 npm scripts 中使用）

还有另一种方法来使用 webpack 的 loader(加载器)。

--module-bind 参数允许你在命令行指定加载器。谢谢 Cezar 指出这一点。

该参数不是特定于 webpack 4 的。从版本 3 开始就有了。

要在没有配置文件的情况下使用 babel-loader ，请在 package.json 中配置你的 npm scripts，如下所示：

package.json 代码:

  "scripts":  {
  "dev":  "webpack --mode development --module-bind js=babel-loader",
  "build":  "webpack --mode production --module-bind js=babel-loader"
  }

你可以再出运行 npm run build 构建项目。

webpack 4：为 React 项目配置 webpack 4

我的个人简介地址https://gm.gmcfg.com/

一旦你安装并配置了 babel ，这里就很容易了。

安装 React：

npm i react react-dom --save-dev

接下来添加 babel-preset-react ：

 npm i @babel/preset-react --save-dev

在 .babelrc 中配置预设：

.babelrc代码:

  {
  "presets":  [
        "@babel/preset-env",  
        "@babel/preset-react"
        ]
  }

很快就完成了！

你可以配置 babel-loader 来读取 .jsx 文件。如果你的 React 组件正在使用 jsx 扩展，这将非常有用。

打开 webpack.config.js 并像这样配置 loader(加载器) ：

webpack.config.js 代码:

  module.exports =  {
  module:  {
  rules:  [
    {
      test:  /\.(js|jsx)$/,
      exclude:  /node_modules/,
      use:  {
          loader:  "babel-loader"
      }
    }
   ]
  }
 };

要测试一下你可以在 ./src/App.js 中创建一个测试的 React 组件：

App.js 代码:

  import  React  from  "react";
  import  ReactDOM  from  "react-dom";
  const  App  =  ()  =>  {
      return  (
            <div>
                  <p>React here!</p>
            </div>
          );
    };
  export  default  App;
  ReactDOM.render(<App  />, document.getElementById("app"));

接下来在 ./src/index.js 中 import(导入) 组件：

index.js 代码:

 import  App  from  "./App";

然后再次运行构建 npm run build 。

webpack 4：HTML webpack 插件

webpack 需要两个额外的组件来处理HTML：html-webpack-plugin 和 html-loader。

添加依赖项：

 npm i html-webpack-plugin html-loader --save-dev

然后更新 webpack 配置：

webpack.config.js 代码:

  const  HtmlWebPackPlugin  =  require("html-webpack-plugin");
  module.exports =  {
  module:  {
  rules:  [
          {
            test:  /\.(js|jsx)$/,
            exclude:  /node_modules/,
            use:  {
                    loader:  "babel-loader"
            }
          },
          {
              test:  /\.html$/,
              use:  [
                    {
                      loader:  "html-loader",
                      options:  { minimize:  true  }
                    }
                ]
          }
    ]
  },
  plugins:  [
      new  HtmlWebPackPlugin({
              template:  "./src/index.html",
              filename:  "./index.html"
        })
      ]
  };

接下来在 ./src/index.html 中创建一个 HTML 文件：

index.html 代码:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>webpack 4 quickstart</title>
 </head>
 <body>
 <div id="app">
 </div>
 </body>
 </html>

然后再次运行构建：

  npm run build

并查看 ./dist 文件夹。您应该看到生成的 HTML 。

没有必要在 HTML 文件中引入您的 Javascript ：bundle(包) 会自动注入。

在浏览器中打开 ./dist/index.html ：您应该看到 React 组件正常工作！

正如您所看到的，在处理 HTML 方面没有任何改变。

webpack 4 仍然是一个针对 Javascript 的模块打包器。

但是有计划将 HTML 添加为模块（HTML作为 entry point(入口点)）。

webpack 4：将 CSS 提取到一个文件中

webpack 不知道如何将 CSS 提取到一个文件中。

在过去，这是 extract-text-webpack-plugin 的工作。

不幸的是，这个插件与 webpack 4 不太兼容。

根据 Michael Ciniawsky 的说法：

extract-text-webpack-plugin 的维护已经成为了一个很大的负担，这已经不是第一次因为它的问题，而使升级 webpack 主版本变的而复杂和繁琐

mini-css-extract-plugin 可以解决这些问题。

注意：确保将 webpack 更新到 4.2.0 版。否则 mini-css-extract-plugin 将无效！

使用以下命令安装该插件和 css-loader ：

npm i mini-css-extract-plugin css-loader --save-dev

接下来创建一个用于测试的 CSS 文件：

css 代码:

  /* */
  /*  ./src/main.css */
  /* */
  body {
  line-height:  2;
  }

配置插件和 loader(加载器)：

webpack.config.js 代码:

  const  HtmlWebPackPlugin  =  require("html-webpack-plugin");
  const  MiniCssExtractPlugin  =  require("mini-css-extract-plugin");
  module.exports =  {
  module:  {
  rules:  [
  {
  test:  /\.js$/,
  exclude:  /node_modules/,
  use:  {
  loader:  "babel-loader"
  }
  },
  {
  test:  /\.html$/,
  use:  [
  {
  loader:  "html-loader",
  options:  { minimize:  true  }
  }
  ]
  },
  {
  test:  /\.css$/,
  use:  [MiniCssExtractPlugin.loader,  "css-loader"]
  }
  ]
  },
  plugins:  [
  new  HtmlWebPackPlugin({
  template:  "./src/index.html",
  filename:  "./index.html"
 }),
  new  MiniCssExtractPlugin({
  filename:  "[name].css",
  chunkFilename:  "[id].css"
  })
  ]
  };

最后在 entry point(入口点) import(导入) CSS：

index.js 代码:

1.  //
2.  // PATH OF THIS FILE: ./src/index.js
3.  //
4.  import style from  "./main.css";

然后再次运行构建：

 npm run build

并查看 ./dist 文件夹。你应该看到生成的CSS！

回顾一下：extract-text-webpack-plugin 不适用于webpack 4 。请改用 mini-css-extract-plugin 代替。

webpack 4：webpack dev server

每当你对代码进行更改时，运行 npm run dev ？远非我们的理想。

使用 webpack 配置开发服务器只需一分钟。

配置好的 webpack dev server 将在浏览器中启动您的应用程序。

每次更改文件时，它都会自动刷新浏览器的窗口。

要设置 webpack dev server，请安装包：

 npm i webpack-dev-server --save-dev

接下来打开 package.json 并调整 scripts ，如下所示：

package.json 代码:

  "scripts":  {
    "start":  "webpack-dev-server --mode development --open",
    "build":  "webpack --mode production"
  }

保存并关闭文件。

现在，通过运行以下命令：

npm run start

你会看到 webpack dev server 在浏览器中启动你的应用程序。

webpack dev server 非常适合开发。（它也可以使 React Dev Tools 在您的浏览器中正常工作）。

Webpack 4.X 从入门到放肆

1、创建一个新目录并进入该目录：

2、通过运行以下命令初始化 `package.json` ：

3、并引入 webpack 4：

4、我们还需要 webpack-cli ，作为一个单独的包引入：

5、现在打开 `package.json` 并添加一个 `build`(构建) 脚本：

6、关闭文件并保存。

7、测试这个新功能很简单。创建 `./src/index.js`：

8、然后运行构建命令：

webpack 4：production(生产) 和 development(开发) 模式

webpack 4：覆盖默认 entry(入口)/output(输出)

webpack 4：用 Babel 7 转译 Javascript ES6

webpack 4：通过配置文件使用 babel-loader

`除非您要自定义 entry point(入口点) ，否则无需指定它`。

webpack 4：不通过配置文件使用 babel-loader（在 npm scripts 中使用）

webpack 4：为 React 项目配置 webpack 4

webpack 4：HTML webpack 插件

webpack 4：将 CSS 提取到一个文件中

webpack 4：webpack dev server

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端成神之路

工具常规操作

Webpack 4.X 从入门到放肆

1、创建一个新目录并进入该目录：

2、通过运行以下命令初始化 package.json ：

3、并引入 webpack 4：

4、我们还需要 webpack-cli ，作为一个单独的包引入：

5、现在打开 package.json 并添加一个 build(构建) 脚本：

6、关闭文件并保存。

7、测试这个新功能很简单。 创建 ./src/index.js：

8、然后运行构建命令：

webpack 4：production(生产) 和 development(开发) 模式

webpack 4：覆盖默认 entry(入口)/output(输出)

webpack 4：用 Babel 7 转译 Javascript ES6

webpack 4：通过配置文件使用 babel-loader

除非您要自定义 entry point(入口点) ，否则无需指定它。

webpack 4：不通过配置文件使用 babel-loader（在 npm scripts 中使用）

webpack 4：为 React 项目配置 webpack 4

webpack 4：HTML webpack 插件

webpack 4：将 CSS 提取到一个文件中

webpack 4：webpack dev server

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端成神之路

工具 常规操作

2、通过运行以下命令初始化 `package.json` ：

5、现在打开 `package.json` 并添加一个 `build`(构建) 脚本：

7、测试这个新功能很简单。创建 `./src/index.js`：

`除非您要自定义 entry point(入口点) ，否则无需指定它`。

工具常规操作