标注:本笔记来自 imooc-qbaty老师-webpack深入与实战
gitbash(or CMD)进行命令操作
一、准备工作
lenovo@lenovo-PC MINGW64 ~
$ cd /d/imooc/
lenovo@lenovo-PC MINGW64 /d/imooc
$ mkdir webpack-test
lenovo@lenovo-PC MINGW64 /d/imooc
$ cd webpack-test/
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm init
# 一路回车初始化好npm...初始化完成会创建 package.json
# 安装 webpack 作为开发依赖,安装后会创建 node_modules 及在 package.json 中添加 webpack 配置
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm install webpack --save-dev
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ ls
node_modules/ package.json
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ atom ./
二、webpack对js文件处理
然后在 atom 中webpack-test目录下创建 hello.js 代码如下:
function hello(string) {
alter(string);
}
# 打包 'hello.js', 事先全局安装 webpack (npm install webpack -g)
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ webpack hello.js hello.bundle.js
打开 hello.bundle.js 代码包括 webpack 所需的代码和 hello.js 中的函数(最下方),注意函数上方的 /* 0 */
, 代表模块代号。
然后再在 atom 中 webpack-test 目录下创建 word.js, 代码如下:
function world() {
return {};
}
hello.js 中最上方添加代码:require('./world.js');
// 引入 world.js;
重新打包 $ webpack hello.js hello.bundle.js
, 再打开 hello.bundle.js 看一下下方加入了 world.js 代码和模块代号 /* 1 */
三、webpack 对css文件的处理
上边测试了 webpack 对js文件的引入,下边再学习一下对 css 文件处理:
atom 中 webpack-test 目录下创建 style.css, 代码如下:
html, body {
padding: 0;
margin: 0;
}
body {
background: green;
}
css 文件需要 webpack loader 安装如下:
lenovo@lenovo-PC MINGW64 /d/imooc/webpack-test
$ npm install css-loader style-loader --save-dev
atom 中 webpack-test 目录下创建 index.html, 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack-test</title>
</head>
<body>
<script src="hello.bundle.js"></script>
</body>
</html>
引入css文件方法有两种:
- hello.js 中添加
require('style-loader!css-loader!./style.css');
重新打包 hello.js, 浏览器打开 index.html 会发现背景颜色变为了green,css起作用。
- hello.js 中添加
require('./style.css');
gitbash: $ webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
同样css起作用。
说明:
--module-bind 'css=style-loader!css-loader'
webpack 提供的命令,打包时模块绑定css的加载器为 style-loader & .css-loader
--watch
webpack命令,监听打包的 hello.js 文件,只要改变自动会打包
--progress
命令窗口显示打包进度
--display-modules
命令窗口列出 hello.js 引入的所有模块
--display-reasons
命令窗口显示 打包引入模块的原因