初始webpack

Posted 小橙子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初始webpack相关的知识,希望对你有一定的参考价值。

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

webpack官网很多文档都在

在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 会有打包模块的原因

以上是关于初始webpack的主要内容,如果未能解决你的问题,请参考以下文章

webpackwebpack.base.conf.js基础配置

Webpackwebpack5 模块联邦(Module Federation)

Webpackwebpack5 模块联邦(Module Federation)实践

webpackwebpack的html-webpack-plugin中的title不起作用?(已解决)

webpackwebpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧!

react学习总结