webpack-入门到精通

  webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle(捆)。
 
  webpack本身是基于node开发的;像我们打包时要进行各种文件依赖关系的处理,要找到各种文件,这就是通过node中的fs模块来操作的了;
 
  从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpack 仍然还是高度可配置的。
 
  为了防止全局安装出现的版本冲突,我们一般都把webpack安装到本地项目中;
 
  Entry
 
  入口指示webpack以哪个文件为入口起点,然后从他开始分析内部的依赖关系Output
 
  定义打包输出后bundles放到哪里?如何命名?Loader
 
  webpack只能识别js代码,对于那些css、img等都识别不了,所以只能借助loader翻译成webpack能看懂的Plugins
 
  插件可以用于执行那些范围更广的任务,插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量Mode
 
  4.1 运行指令
 
  结论:
 
  1、webpack能处理js/json文件,不能处理css/img等其他资源
 
  2、生产环境比开发环境多一个压缩代码
 
  3、生产环境和开发环境将ES6模块编译化成浏览器能识别的模块化(import data from ‘”这句是es6的语法)
 
  4.2、打包样式资源
 
  1、需要新建一个webpack.config.js配置文件
 
  注意:这个配置文件就是用来指示webpack要怎么干活,当你运行webpack指令时,会自动加载里面的配置;
 
  所有构建工具都是基于nodejs平台运行的,所以遵循的都是Commonjs模块规范
 
  2、下载上述用到的两个loader(style-loader、css-loader)
 
  3、找到index.js的文件路径,执行webpack即可(它会根据配置文件中的入口文件去打包)
 
  4.3、打包html资源
 
  1、同时创建一个html文件和index.js,两者同级目录,没有任何引入关系
 
  2、然后写webpack配置文件(其他相同的部分就不写了)
 
  注意: loader使用方式是下载、使用,但plugin不同的一点就是使用前还要先引入
 
  4.4、打包图片资源
 
  注意:这里的url-loader是依赖file-loader的,所以file-loader也要下载
 
  4.5、打包其他资源
 
  注意:打包其他资源时这里使用排除的方式
 
  4.6、devServer
 
  正常情况下,文件内容发生改变后,需要重新打包生成新的打包后的文件,才能看到最新的效果,这样效率有点低,不便于开发,所以出现了devServer(开发服务器)帮助我们做一些自动编译、自动打开浏览器并自动刷新页面的工作
 
  这里要用到一个插件:mini-css-extract-plugin
 
  下载:配置:
 
  注意:这个插件使用上有所不同:1、插件初始化配置;2、需要用自带loader取代srtle-loader,作用就是从js文件中提取css文件
 
  需要用到postcss-loader、postcss-preset-env
 
  下载:
 
  除此之外还需要哎package.json中配置browserslist属性
 
  注意: 这里要注意默认是走生产环境的兼容配置,如果你要走开发环境的兼容配置的话,则还需要在配置文件中设置node的环境变量,即:
 
  process.env.NODE_ENV=“development”
 
  需要用到optimize-css-assets-webpack-plugin插件
 
  下载:
 
  配置如下:
 
  这个需要用到eslint-loader和eslint
 
  下载:配置:
 
  但是这样配置了以后,它还不知道要以什么样的规则去检查代码,所以还需要设置检查规则,这里推荐使用airbnb规则,这个规则需要用到3个库

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61672.shtml

张贴在2