windows下安装webpack,推荐1.13.2版本,目前4.0+有坑

一、注意:建议安装下GIT,然后用git bash来敲命令

安装完git后,其中有两个程序, Git BASH、Git GUI

Git BASH

Git for Windows 提供了一个仿真环境,可以从windows命令行执行git命令. *NIX 用户 应该会觉得很顺手, 在这个仿真环境下,使用git命令跟linux 和 UNIX 一样一样的。

Git GUI

Windows 用户基本一关于图形界面, Git for Windows 同样提供了一套Git图形操作界面, 功能强如Git BASH, 每一git命令都有对应的界面操作, 甚至包括必不可少的diff 工具.

二、安装webpack 步骤

1、新建文件夹


2、初始化npm(输入npm init 后,一直回车,直到出现最后一行Is this OK? ,再输入yes,回车)



3、安装webpack(输入npm install [email protected] --save-dev)


输入webpack -v 查看版本



4、创建hello.js(touch hello.js)


编辑hello.js (vi hello.js),这里用VI,也可以用自己喜欢的IDE


保存退出(:wq)

用webpack 打包hello.js(输入:  webpack hello.js hello.bundle.js


输入ll,查看是否打包成功(多了hello.bundle.js)


5、安装css-loader 、style-loader( npm install css-loader style-loader --save-dev
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件,就需要使用到 css-loader 和 style-loader,他们做两件不同的事情,css-loader 会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

然后测试两个loader是否安装成功




打包成功

6、新建一个index.html测试是否安装成功

引入打包好的文件名hello.bundle.js(下面用phpstorm打开更快)


用浏览器访问显示,说明webpack安装成功





猜你喜欢

转载自blog.csdn.net/itbird58/article/details/79579300