webpack初识

来源：互联网发布：网络倒卖警服编辑：程序博客网时间：2024/05/20 23:03

1.安装

全局安装

npm install webpack -g

在项目下安装：

npm install webpack --save-dev

打包文件基本命令：

webpack source.js bundle.js

在目录下创建webpack.config.js配置文件，另外也可以用--config指定配置文件；在配置文件用module.exports指定一个配置文件，各个配置参数都是以键值对的形式：

(1)入口配置entry：字符串/数组/对象

字符串：单个入口文件
数组：单个入口，但是存在多个相互依赖的文件
对象：多个入口文件，此时对应的出口filename也要改成多出口形式，不然会报错

(2)出口配置output:对象形式。其中path和filename字段表示打包的路劲和打包后的文件名，注意的是当存在多个入口的时候，打包的文件名要修改成自动生成的形式。例如用entry对象的键作为打包后文件名称的时候可以用 [name].js。

(3)例子：

(4)在终端输入webpack --help可以查看webpack的所有命令行

(5)为了省去在终端输入命令的繁琐，可以在npm的包信息文件packjson.json文件中，在scripts对象中加入webpack的cli，然后在cmd中输入以下命令运行我们设置好的webpack命令：

npm run webpack

在项目中要引入打包后文件到html中，手动引入是比较繁琐的。另外如果打包文件名是随机的，比如hash来命名。这是可以用到webpack的一个插件html-webpack-plugin来解决这种需求。在项目中局部安装：

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

在webpack.config.js中加入plugins数组，数组元素为每个插件的实例对象。对象中用template指定模版文件(即要插入打包后js的文件)，filename指定生成的文件

模版默认支持ejs模版语法。如果要向模版传递参数，可以先在插件对象中定义键值对，然后在模版中用<%= htmlWebpackPlugin.options.[key]%>来获取

如果我们想要在js文件一部分在<head>，一部分在<body>引入，先在插件对象中设置inject为false，然后在模版中对应位置引入，如下：

模版中的设置如下：

得到的打包的html文件如下：

如果想要上线项目的话，引入的路径一般都要设置成绝对路劲的。这时候可以在output对象中加入publicPath，设置下服务器进行。

如果项目是多页面的应用的情况，可以通过new多个该插件实例进行处理。因为我们每个页面要用到的入口都是不一样，所以我们可以为每个实例增加chunks属性，指定要用到的入口名称。另外可以用excludeChunks属性排除哪些不用的chunks，这种适合入口很多很多的情况，如下：

阅读全文

0 0