webpack入门指南

爱被打了一巴掌 2022-06-17 14:38 240阅读 0赞

1.简介

Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。今天跟着我们源码时代[php培训][php]学科讲师来学学Webpack的安装以及使用！

2.Webpack的安装

安装Webpack之前必须确保安装了Node.js.

在当下项目中安装

npm install webpack --save-dev

npm install webpack@<version> --save-dev

在当前项目中安装的话, 只能够在项目根目录下/node\_modules/.bin/webpack运行webpack命令.

全局安装

npm install webpack -g

全局安装的话,可以在任何项目目录中运行webpack命令

3.项目中可能遇到的问题

通过webpack构建一个项目.

1.创建项目文件夹并且安装本地webpack

mkdir webpack-demo && cd webpack-demo

npm init -y

npm install --save-dev webpack

2.在项目根目录下创建app/index.js

function component () \{

var element = document.createElement('div');

/\* lodash is required for the next line to work \*/

element.innerHTML = \_.join(\['Hello','webpack'\], ' ');

return element;

\}

document.body.appendChild(component());

3.在项目根目录下创建index.html

<html>

<head>

<title>webpack 2 demo</title>

<script src="https://unpkg.com/lodash@4.16.6"></script>

</head>

<body>

<script src="app/index.js"></script>

</body>

</html>

在index.js运行之前需要依赖ladash.

现在应用程序存在三个问题:

如果index依赖的lodash不存在,就无法使用到lodash中提供的函数.

如果index.js和lodash引入的顺序不对也发生错误.

如果index.js没有使用到lodash,那么加载lodash就没有意义.

4.Webpack解决问题

1.使用npm安装lodash

npm install --save lodash

2.修改app/index.js

import \_ from 'lodash';

function component () \{

...

3.修改index.html

<html>

<head>

<title>webpack 2 demo</title>

</head>

<body>

<script src="dist/bundle.js"></script>

</body>

</html>

4.项目根目录下运行webpack命令(使用全局命令)

webpack app/index.js dist/bundle.js

5.使用webpack的一个配置文件

在项目根目录下创建一个webpack.config.js

var path = require('path');

module.exports = \{

entry: './app/index.js',

output: \{

filename: 'bundle.js',

path: path.resolve(\_\_dirname, 'dist')

\}

\};

entry: 入口文件

output.filename: 输出的文件名

output.path: 输出的文件目录

本文来源：http://www.itsource.cn/web/news/5/20170417/1210.html

[php]: http://www.itsource.cn/threePhpWeb.htm

发表评论取消回复

表情：

评论列表（有 0 条评论，240人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack 快速入门指南（三）

生产环境构建在本指南中，我们将深入一些最佳实践，并且使用工具，将网站或应用程序构建到生产环境中。配置开发环境(development)和生产环境(pro...

た入场券/ 2024年04月17日 18:35/ 0 赞/ 85 阅读

相关 Webpack 快速入门指南（二）

开发本指南继续沿用管理输出指南中的代码示例。如果你一直跟随之前的指南，应该对一些 webpack 基础知识有着很扎实的理解。在我们继续之前，先来看看如何建立一个...

迈不过友情╰/ 2024年04月17日 16:56/ 0 赞/ 86 阅读

相关 Webpack 快速入门指南（一）

简介 webpack 是一个前端资源加载/打包工具。 webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 w...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 15:25/ 0 赞/ 94 阅读

相关 webpack 入门及优化指南

我想大部分人都用过 webpack 。作为现代前端开发中最火的模块打包工具，它只需要通过简单的配置，就能轻松完成模块的加载和打包，实属神器。不过我发现身边很多朋友都觉得它不

我不是女神ヾ/ 2023年07月24日 08:14/ 0 赞/ 32 阅读

相关 webpack入门指南（图文）

webpack入门 1、安装node.js [点击进入官网][Link 1]下载最新版本的node.js ![在这里插入图片描述][watermark_type_

矫情吗；*/ 2023年07月16日 13:58/ 0 赞/ 15 阅读

相关 Webpack入门及技术指南

初识Webpack webpack是一个基于node.js编写的资源整合打包器（官方原称：MODULE BUNDLER），通过指定入口文件，他能将该入口

「爱情、让人受尽委屈。」/ 2023年07月03日 02:53/ 0 赞/ 15 阅读

相关快速入门webpack指南

一、什么是webpack? 概念：webpack是前端工程化的具体解决方案。主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScri

Dear 丶/ 2022年09月08日 04:56/ 0 赞/ 305 阅读

相关 webpack 入门指南

什么是 webpack？ webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模

悠悠/ 2022年07月17日 00:38/ 0 赞/ 224 阅读

相关 webpack入门指南

1.简介 Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。今天跟着我们源码时代[php培训][

爱被打了一巴掌/ 2022年06月17日 14:38/ 0 赞/ 241 阅读

相关 webpack入门指南

1.简介 Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。今天跟着我们源码时代[php培训][

本是古典何须时尚/ 2022年06月14日 09:22/ 0 赞/ 245 阅读