webpack学习笔记

1、创建一个webpack-test文件夹
2、npm init 初始化npm
3、使用opensub package.json 查看package文件是否正确
4、npm i webpack --save-dev 安装webpack
5、安装完webpac
6、opensub ./ 指令表示使用sublime打开当前文件夹目录
7、创建一个hello.js
输入

function hello(str){
    console.log(str);
}

8、在控制台执行命令webpack hello.js hello.bundle.js 可以看到该文件目录下生成了一个hello.bundle.js文件
ps：如果控制台提示找不到webpack指令需要npm i -g webpack 全局安装一下webpack指令
9、webpack打包成功时命令台输出如下

image.png

其中
Asset是生成的文件名称
Size是文件大小
Chunks文件块
Chunk Names文件块名称
10、新建一个hello2.js并在word.js里面引入代码如下

require('./word.js');
function hello(str){
    console.log(str);
}

11、重新执行webpack hello.js hello.bundle.js控制台输出的文件块会有两个
12、新建一个style.css文件并在hello.js里面引入
重新执行代码时会报错，这是因为webpack并不能直接打包css文件类型
此时需要安装两个库
13、npm i css-loader style-loader --save-dev
14、安装完成之后在hello.js中重新引用。引入方法如下

require('style-loader!css-loader!./style.css');

此时重新打包即可成功
15、新建一个index.html文件在文件底部引入hello.bundle.js
16、在hello.js底部输入hello('hello world');并在style.css里面输入body{backgroud：lightblue;}
17、重新打包文件即可看到页面中的效果
css-loader使得webpack可以打包css
style-loader是将打包的css代码插入到html中的header标签里面
18、为了避免每次打包都要输入style-loader！css-loader！的麻烦可以使用webpack的命令行
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
19、为了在每次更新代码的时候自动打包可以将命令行改为
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch
这样每次更改代码的时候可以自动看到更改的效果
20、一些命令行的意义
--progress可以看到短暂的打包进度条
--display-modules可以将使用的模块展示出来
--display-reasons告诉你为什么打包某些模块的原因