webpack入门01

Posted

tags:

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

1,创建项目目录:

  • 创建项目目录为:webpack_demo
技术分享

2,npm初始化:

  • 在项目目录中初始化npm:npm init
  • 初始化将在项目目录中生成package.json文件
技术分享
技术分享

3,安装webpack:

  • 通过npm安装webpack:npm install webpack --save-dev
  • 安装成功后webpack会在node_modules中
技术分享
 
技术分享

4,webpack测试(单个JS文件):

  • 在项目目录创建hello.js文件
  • 将hello.js打包成hello.bundle.js:webpack hello.js hello.bundle.js
  • hash本次打包的哈希值 | Version版本 | Assert本次生成的文件名 | size生成的文件大小 | chunks本次打包的分块 | chunk Names本次打包的块名
技术分享
生成的hello.bundle.js文件中,包含我们写在hello.js中的方法,注释中标注有本次的打包的块号[0]
技术分享

5,webpack测试(有依赖关系的JS文件)

  • 创建hello.js和world.js,其中hello.js依赖world.js
  • 将2个文件打包合并为一个hell.bundle.js文件:webpack hello.js hello.bundle.js
说明:hello.js依赖与world.js文件,所以打包的时候webpack会根据依赖关系也将world.js一起打包,在生成的hello.bundle.js中可看到,hello.js的块号是0,world.js的块号是1,hello.js依赖块号1;
技术分享
技术分享
 
技术分享
技术分享

6,webpack测试(有CSS的文件)

  • webpack默认只支持js,要管理打包其他类型文件,需要使用加载器,此处要打包css文件,要先安装css文件加载器:
  • npm install css-loader --save-dev
  • npm install style-loader --save-dev
技术分享
技术分享
技术分享
技术分享

7,webpack其他命令参数:

--module-bind:绑定加载器,而不是通过在代码中指定加载方式;
--progress:打包过程中显示百分比进度
--display-modules:显示打包的模块
--display-reason:显示打包的原因
--watch:热打包

 

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

webpack入门笔记

Webpack 入门教程1

webpack入门webpack的api

webpack入门——webpack的使用

webpack入门笔记

Webpack 入门