webpack慕课学习总结(一)

一. 用命令行工具创建新的文件夹，并使用npm初始化

二.初始化完文件夹后全局安装wabpack 

npm i -g webpack

然后在创建的文件夹下安装webpack,并保存到配置文件中

npm install webpack --save-dev

安装过程图片

安装完后在sublime上打开当前创建的目录，并创建一个hello.js文件

接下来尝试着用webpack打包这个文件,使用命令行工具输入

webpack hello.js hello.bundle.js

打包后命令行会给出相应的信息，

Hash>哈希值,Version>webpack的版本,Time>打包花费的时间

Asset>打包生成的文件,Size>文件的大小,Chunks>打包的分块,Chunk Names>打包的块名称

看到下图表示已经操作成功,图中显示打包的这个模块的编号为0

接下来再写一个文件，然后用hello.js这个文件使用require去引用这个文件

接着在命令行输入以下代码

webpack hello.js hello.bundle.js

接下来试着打包css文件，创建一个style.css文件，同样也在hello.js里去require这个css文件

然后再在命令行输入

webpack hello.js hello.bundle.js

发现报错，如下图

 

上述报错说明需要一个适当的loader去处理这种类型文件，因为webpack天生不支持css文件的直接处理

所以我们需要在命令行中npm安装支持这种类型的loader

npm install css-loader style-loader --save-dev

接下来安装完之后再运行

webpack hello.js hello.bundle.js

 发现还是报错

这是因为css文件引入的前面需要相应的loder,如下图所示

接下来就打包成功了

为了更清晰的展示效果，再建立一个html文件，同时引入hello.bundle.js文件

然后在hello.js里执行hello('hello world!')

接着在命令行运行

webpack hello.js hello.bundle.js

再打开浏览器发现运行好了

接着我们在css文件中加一句代码

body{
  background-color:red;
}

 再运行代码打包

webpack hello.js hello.bundle.js

这时会发现样式的效果没出来，因为要使css生效，还需要借助一个loader,就是style-loader

 

再运行代码打包,就看到样式生效了

webpack hello.js hello.bundle.js

css-loader是使webpack可以处理.css的文件,style-loader文件是通过css-loader处理完的一个文件，把处理完的这个文件新建一个style标签，插入到html里，当我们的html引入了打包后的文件hello.bunlde.js后,这段代码就被执行，css就被插入到head标签里.

 每次引用css文件不一定要指定它的style.loader，可以有更简便的方法

通过命令行输入

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"

这样就打包成功了

ps:每次更新完文件都需要重新命令行打包一次，非常的繁琐，则可以通过下面这条命令实现自动更新，自动打包

webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch

 

转载于:https://my.oschina.net/u/3377378/blog/892264