webpack入门02

Posted 2020-10-06

1，创建webpack项目

2，npm初始化

3，安装webpack

4，创建其他目录

--src：源文件目录

　　--script：脚本文件，如：javascript，coffeeScript，typeScript等

　　--style：样式文件，如：css，sass，less等

--dist：打包后静态资源目录

5，创建webpack配置文件

webpack.config.js（使用CommonJS规范定义配置文件） 

说明：

1, 自定义指定webpack配置文件名称

• webpack.config.js若是其他文件名，打包时通过--config指定：

2, 结合npm定义webpack命令

• 配合npm配置文件定义webpack参数命令，在npm的package.json文件的script中配置如下：
• "webpack" : "webpack --config webpack.config.js --progress --display-modules --color --display-reason"，
• 打包时即可使用命令：npm run webpack，定义的脚本即会被运行

3, webpack多种入口

• webpack.config.js入口和出口文件：

string：单独入口

object：多个入口多个文件

array：多个入口合并在一个文件中

• 例一：2个没有依赖关系的多个入口合并打包为一个文件（array形式）

• 例二：2个没有依赖关系的多入口文件独立打包（object形式），输出可以使用的占位符有：name, hash, chunkhash（哈希值可当作生成的文件的版本号，文件改变是才会改变）

4, html-webpack-plugin插件

打包时通过hash和chunkhash生成的文件名是不确定的，要在html引用时，需要使用插件；

a）先安装插件

npm install html-webpack-plugin --save-dev

b）使用插件

使用这个插件后，打包时会在定义的出口指定目录中，生成一个index.html文件，文件中会自动引用生成的模块

 

 

c）插件参数：template

通过插件参数template可以为生成的html文件指定模板

d）插件参数：filename

通过插件参数filename可以指定生成的html文件的文件名

e）插件参数：inject

通过插件参数inject可以指定在生成的html文件中模块的引用是放在head还是body标签中，值为false时表不引用模块，可在模板自定义指定引入的模块和模块引用的放置位置

f）自定义参数和参数获取

在配置文件中自定义一些模板参数，若想在模版中获取到参数，可通过<%=%>结合插件对象来获取，然后在打包时生成的index.html文件将包含我们自定义的参数，如以下自定义了title参数

g）遍历插件参数

还是使用<%=%>标签方式可以在模板中遍历插件参数

h-A）综合引用：自定义指定模块引用在页面中的位置

指定main模块放置在head中，a模块放置在body中

• 设置inject参数为false；
• 在模板中结合插件参数指定引用文件的位置；

h-B）综合应用：配置模块引用的绝对路径

模块在文件中的引用是使用相对位置的，若想指定根据发布环境指定具体位置，可在配置文件中指定；

• 在出口中指定publicPath参数（publicPath相当于占位符，打包时会自动加入相对位置中）

h-C）综合应用：压缩html文件

• 打包时压缩html使用参数minify
• minify.removeComments=true（压缩时删除注射）
• minify.collapseWhitespace=true（压缩时删除空格）

 

 

h-D）：根据模板生成多个html页面

根据一个模板生成多个html页面，每个html指定引用不同的模块

• 配置文件中plugin参数时数组类型，可指定多个，每个对应会按配置生成一个html文件；
• chunks参数：可指定生成的文件要引用的模块
• excludeChunks参数：可指定生成的文件要引用的模块为排除掉当前指定的模块剩下的模块

 

 

 

 

 

h-E）内联式引入模块

• 通过webpack提供的接口compilaation.assets[模块路径（不包括publicPath路径）].source()将模块代码插入到生成的html页面中