webpack入门

最新推荐文章于 2024-11-10 09:00:00 发布

Czccava

最新推荐文章于 2024-11-10 09:00:00 发布

阅读量250

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/qq_42488433/article/details/100094552

版权

webpack用于编译JavaScript模块。一旦安装了，你可以用webpack与CLI或者API接口

基本配置

首先我们要先建立一个目录，初始化npm，在本地安装好webpack，然后安装webpack-cli（用于在命令行上运行webpack）

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev

项目目录

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

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

我们还需要调整我们的package.json文件，确保我们将包标记为private，以及删除main条目。

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {}
  }

在这个实例中，<script>标记之前存在隐式依赖关系，而我们的index.js依赖于在页面运行前包含的lodash。这是因为index.js从未明确声明需要lodash，它只是假设全局变量 _ 存在。

创建一个包

首先，我们将调整一下我们的目录结构，将源代码（/src）与我们的分发代码（/dist）分开。

源代码是我们编写和编辑的代码，而分发代码是对我们构建过程的输出的最小化和优化，他们最终会在浏览器中加载。

调整后的目录结构：

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

我们要捆绑lodash依赖项index.js，我们需要在本地安装库：

npm install --save lodash

ps:安装将捆绑到生产包中的包时，应该使用npm install --save;

安装为开发目的软件包（如linter，测试库等）时，应该使用npm install --save-dev。

现在让我们把lodash在我们的脚本中导入

src/index.js

+ import _ from 'lodash';
+
  function component() {
    const element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

现在，因为我们捆绑了我们的脚本，我们必须更新我们的index.html文件。

我们移除lodash的<script>，并把另外一个<script>改为加载包。

代码如下

<!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

在这个设置中，index.js明确要求lodash存在，并将其绑定为 _ （因为没有全局污染）。通过声明模块需要哪些依赖项，webpack可以使用此信息来构建依赖关系图，然后，使用图形生成优化的捆绑包，包中的脚本将以正确的顺序执行。

有了这个，我们运行npx webpack，它将我们的脚本src/index.js 作为入口，并将生成的dist/main.js 作为输出。

index.html 在浏览器中打开

使用配置

从webpack4开始，webpack不需要任何配置，但很多项目需要更多复杂的设置，这就是为什么webpack支持配置文件的原因。

所以我们添加一个webpack.config.js文件

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
};

现在让我们再次构建。

如果webpack.config.js存在，则webpack命令默认选择它。

配置文件比简单的CLI使用具有更大的灵活性，我们可以通过这种方式指定加载器规则，插件，解析选项和许多其他增强功能。

NPM

因为从CLI运行的webpack副本跟我们平常使用的不同，为了方便，我们可以通过添加一个npm脚本来调整我们的package.json：

package.json：

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

现在可以用npm run build 来代替 npx webpack --config webpack.config.js