http://webpack.github.io/docs/what-is-webpack.html
一、初始化
npm init
二、输入
npm install -g webpack
npm install webpack -D
三、新建一个文件hello.js,并一段代码
利用webpack打包这个hello.js这个文件,输入
webpack hello.js hello.bundle.js
四、我们再写一个world.js文件,然后让hello.js这个文件去引用这个文件,通过这个方式,我们来了解一下webpack的工作原理
五、接下来我们在hello.js文件里对函数进行引用
输入
webpack hello.js hello.bundle.js
六、下面我们来介绍一下webpack是如何处理css文件的
首先,建立一个style.css文件
同样,我们在hello.js里面引入这个style.css文件
【重点,这个千万不可省略】同时我们需要安装loader文件,输入
npm install css-loader style-loader --save-dev
webpack hello.js hello.bundle.js
打包以后生成的代码
建立一个index.html文件
执行hello函数
输入
webpack hello.js hello.bundle.js
我们在浏览器打开这个文件,发现代码已经可以执行了
我们在给背景颜色加一个红色
输入
webpack hello.js hello.bundle.js
我们刷新index.html发现样式并没有生效,其实,我们还需要加一个style-loader,如图
输入
webpack hello.js hello.bundle.js
这时候发现背景变为红色,样式生效了,所以require(‘style-loader!css-loader!./style.css’)里面的style-loader!css-loader!千万不能省略或漏写。
如果不写,就要在命令行写很长一串
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader"
【注意】”css=style-loader!css-loader”外面是双引号,单引号可能会报错
每一改变都输入一边这么长的命令实在有点麻烦,那有如何使它自动改变呢?有的,输入
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch
输入打包进度过程
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress
我们可以看到一个百分百读条
我们还可以看打包的模块
我们还可以查看到为什么打包这个模块的原因一并告诉你
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-reasons
所以通过这个命令行工具,我们可以很清晰的知道我们想要知道的信息
[注意]前面都是两个横杠,写一个会报错的
webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --progress --display-modules --display-reasons --watch