webpack的安装+使用

一、安装

1、首先全局安装：

npm i webpack -g

npm i webpack-cli -g

npm i webpack-dev-server -g

检测版本：webpack -v

2、然后创建一个空文件夹

npm init

3、安装express

npm i webpack --save-dev

ok安装成功

-----------------------------------------------------------------------------------------------------------------------------

 

二、测试

1、现在测试 js

新建hello.js，写入内容

然后使用命令:webpack hello.js -o dist/hello.bundle.js

打包成功，查看文件已经生成 dist/hello.bundle.js

2、测试 css

打包和引入

安装：npm i css-loader style-loader --save-dev

新建style.css文件并写入样式

在hello.js引入css文件（格式如下）

require("style-loader!css-loader!./style.css")

然后新建index.html 引入<script src="dist/hello.bundle.js"></script>

打开可看到页面样式和js起作用了

监听：

在命令窗口输入：

webpack hello.js -o dist/hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

在引入时可去掉 style-loader!css-loader!.

require("/style.css")