webpack4指南part1

最新推荐文章于 2025-08-08 15:25:35 发布

weixin_33757911

最新推荐文章于 2025-08-08 15:25:35 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/yumendexihai/p/9990446.html

本文详细介绍了如何使用Webpack进行项目搭建和配置，从初始化项目到使用Webpack进行模块打包，再到配置文件的使用和npm脚本的设置，帮助初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【自己理解翻译的webpack官网文档，有什么错误欢迎指出。配置指webpack.config.js这个文件】

基本步骤

创建一个目录，初始化npm，安装webpack和webpack-cli（在命令行运行webpack的工具）

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

先来模拟下不用webpack时我们如何使用一个第三方库。

在目录中创建以下文件

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

src/index.js

其中_.join()中_是lodash库里的方法，在index.html中引入

function component() {
  let element = document.createElement('div');
  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的工作原理，可以看https://docs.npmjs.com/files/package.json

修改package.json

  {
    "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": {}
  }

像引入lodash库的方法管理javascript存在以下几个问题

写在script标签里面不够直观
缺少依赖或顺序写错都可能导致应用出错
浏览器会加载全部代码，即使里面有很多不需要的东西

使用webpack来避免这些问题

创建一个包

首先稍微调整下项目的结构

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

为了将lodash和index.js捆绑在一起，我们需要将lodash下载到本地

npm i --save lodash

下载开发环境依赖时使用 npm i -D(-save-dev) xxx，项目依赖包使用 npm i xxx (-save)

完成后引入lodash

+ import _ from 'lodash';
+
  function component() {
    let element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

删除index.html中引入的lodash和index.js，引入一个main.js，main.js是webpack打包前两项后的js

 <!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>

通过一开始的模块依赖关系，webpack会生成依赖关系网，通过网生成一个以正确顺序执行的优化后的打包。

在命令行运行npx webpack，将会在dist目录中生成main.js(node版本高于8.2，会自带npx)

npx webpack

...
Built at: 13/06/2018 11:52:07
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/

打开index.html，如果看到hellow world说明webpack正常的运行了

模块

在webpack中可以放心使用import和export，但若使用其它es6的语法，必须使用类似babel这样的编译器

关于babel https://babeljs.io/

关于loader https://webpack.js.org/concepts/loaders/

使用配置文件

使用webpack4不需要任何配置，但考虑到大部分项目的复杂性，所以webpack支持配置文件。

在项目根目录创建webpack.config.js

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

内容

const path = require('path');

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

现在可以使用这个文件来构建项目

npx webpack --config webpack.config.js

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/

如果配置文件名就是默认的webpack.config.js ，webpack会默认使用此文件，--config后面可以跟自定义名字的配置文件

关于配置文件https://webpack.js.org/configuration/

npm脚本

可以在pakage.json中设置快捷方式运行webpack

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "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命令

npm run build

...
  Asset      Size  Chunks             Chunk Names
main.js  70.4 KiB       0  [emitted]  main
...

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/.

总结

基础项目目录搭建完成

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

转载于:https://www.cnblogs.com/yumendexihai/p/9990446.html