webpack教程

最新推荐文章于 2024-08-08 10:51:22 发布

糖薪砖

最新推荐文章于 2024-08-08 10:51:22 发布

阅读量508

点赞数

分类专栏： Webpack

本文链接：https://blog.csdn.net/tangxinzhuan/article/details/87955117

版权

本文将带你全面了解webpack的基本概念、配置项、插件和加载器的使用，以及如何优化webpack构建流程，助你成为webpack专家。

摘要由CSDN通过智能技术生成


本机环境
系统：windows 7 64位系统
node：		8.12.0
npm：		6.4.1
webpack：	4.29.5
webpack-cli：3.2.3

一、安装

1、安装nodejs

下载地址（下LTS版）: https://nodejs.org/zh-cn/

安装好后, 如果安装过Git, 那么直接在桌面Git Bash Here进入bash窗口, 否则需要进入CMD命令行窗口执行如下命令查看安装版本

$ node -v
$ npm -v 


2、安装 webpack 和 webpack-cli

配置npm指向国内的npm仓库镜像(因为直接从国内下载npm包要快很多)

$ npm config set registry https://registry.npm.taobao.org
$ npm install -g webpack
$ npm install -g webpack-cli

注意：
一定要耐心等待install, 因为npm下载有点慢
npm默认把包安装在这个目录下 C:\Users\你的用户名\AppData\Roaming\npm
因此需要把这个目录添加进环境变量，然后重新打开bash窗口，或者CMD窗口执行如下命令查看版本信息

$ webpack -v
$ webpack-cli -v


二、使用

1、hello world

$ mkdir myweb
$ cd myweb
$ mkdir src

注意：
必须创建src目录，且要打包的js源文件也必须在这个目录下

$ vi src/index.js

index.js文件的内容如下：
document.write("hello world !");
document.write("<br/>");
document.write(require("./login.js"));

$ vi src/login.js

login.js文件的内容如下