初始webpack

Posted 2020-09-14 小橙子

webpack支持的三种模块化方式: AMD,COMMON,ES6

webpack官网很多文档都在

• Configuration

在webpack中，任何资源都视为一个模块

loader的处理方式是从右到左

 

webpack-2：

https://qiutc.me/post/webpack-2-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7-What-s-new-in-webpack-2.html

        

一、初始webpack

webpack官网地址：http://webpack.github.io/docs/what-is-webpack.htm

　　1.       安装全局 => npm install webpack –g；

　　2.       进入文件根目录,例如test；

　　3.       初始化npm  => npm init  (回车创建package.json)；

 　　　　　　　

　　4.       在文件夹安装webpack => npm install webpack - -save-dev;安装完之后有文件夹node_modules;

　　5.       在根目录test下新建hello.js,

 　　　　　　

　　　　　　-- 使用webpack打包文件hello.js; 命令行 => webpack hello.js hello.bundle.js(打包以后文件的名称);

　　　　　　-- 打包完成会给一些信息：哈希；版本；时间；Asset(打包生成的文件)；size(文件大小)；chunks(这次打包的分块)；chunk Names (这次打包的块名称)

　　　　　　-- 打包完以后的文件hello.bundle.js，上面有一大段代码是在打包的过程中，生成的它自己所需要的一些内置函数；比如webpack_require; 在后面能看见我们的代码，以及给这个代码块的编号；

　　6.       新建一个文件，熟悉下webpack的工作原理；

 　　　　　　

　　　　　　-- 新建一个world.js，在hello.js文件中 rquire () 引用进来;

　　　　　　

　　　　　　-- 再运行一下 webpack hello.js hello.bundle.js

　　　　　　-- 打包完成，会有两个模块(0,1)；再看一下文件名内容，world已经被打包进来，hello.js里面的require() 已经变成了webpack 内置的 webpack_require;这是webpack的一种工作方式；寻找它的依赖然后把它们打包在一起；

　　7.       试一下打包css文件

　　　　　　-- 新建一个style.css  

 　　　　　　

　　　　　　-- 在hello.js文件中 rquire 进来;

 　　　　　　

　　　　　　打包；会报错 You may need an appropriate loader to handle this file type.（你需要一个适当的loader来处理这种文件！）

　　　　　　-- 这说明webpack 天生是不支持这种类型.css的，要处理这种类型需要依赖loader;

　　　　　　-- 在项目目录下安装这个css-loader;配合css-loaer 还需要 style-loader;

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

　　　　　　再运行一下webpack hello.js hello.bundle.js 还是报错；文件中require()的css并没有指定相应的loder;

　　　　　　-- require(\'css-loader!./style.css\');这种语法，在引用这个文件之前，必须先经过css-loader的处理;

 　　　　　　

　　　　　　在运行一下命令;css文件已被打包进来；也多了一些其他的自定义的内置函数；

　　8.       为了更清晰的展示效果，在建一个html文件；引入打包后的文件；

　　　　　　——在hello中，添加执行函数代码 hello(\'hello world\');

　　　　　　 

　　　　　　打包；然后在浏览器打开html文件，hello函数已经执行；

　　　　　　——再修改一下css 比如给body加背景颜色；

 　　　　　　

　　　　　　打包；刷新页面；并没有效果；因为我们要是css生效，还需要借助一个loader:style-loader; require(\'style-loader!css-loader!./style.css\');

 　　　　　　

　　　　　　打包；刷新页面；发现css生效；

　　　　　　F12看下代码，会发现我们写的css，被新建了一个style标签插在了head里面；这是通过style-loader做到的；

　　　　　　style-loader：把css-loader处理完的文件，新建一个style标签放在head里面；

　　　　　　css-loader： 是的webpack可以处理.css文件；

 　　9.       如果不把loader放在require里，可以通过命令行工具；

 　　　　　　

　　　　　　Webpack hello.js hello.bundle.js –module-bind ‘css=style-loader!css-loader’;

　　　　　　模块绑定,如果是css, 用style-loader,style-loader之前用css-loader处理;

　　10.   –watch监听；文件改变就会打包；

　　　　　　Webpack hello.js hello.bundle.js –module-bind ‘css=style-loader!css-loader’ --watch

　　11.   --progress 可以看到打包过程；有个百分比读条

　　12.   –display-modules 可以看到打包的模块 会把引用的所有的模块会列出来

　　13.   –display-reasons 会有打包模块的原因