webpack学习记录一

安装webpack

1. 安装node.js:   npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 全局安装webpack到本地环境中:   npm install webpack -g
3. 在项目中使用webpack:   1)通过 npm init 实例化package.json文件     2)通过 npm install webpack[@1.2.x] --save-dev 安装 webpack 到 package.json 文件中(‘[]’中为可选内容，安装指定版本的webpack,因为高版本的webpack在进行打包时会出现很多问题，故我选择的是安装3.10.0版本的webpack)

 

使用webpack命令打包

知识讲解：

命令行输入：  webpack  

options     即可将一个或多个入口文件打包成出口文件 options可以加上很多参数，用以进行打包的相关设置

实践：

打包命令及打包信息展示：

原文件：

打包后的文件：

 

使用webpack配置进行打包

想要跟命令行打包时一样显示打包的一些信息，就在package.json中添加webpack这一属性，并进行以下的设置。并且后期在打包时输入命令npm run webpack（此命令才会执行scripts标签内的内容），如果未进行以下配置，则使用命令 webpack就可进行打包

使用配置文件将进行一个入口文件到一个出口文件的打包：

// webpack.config.js文件内容
// 注意出口文件目录要用绝对路径也就是用以下的形式设置，如果想设置入口文件一样用相对路径则会报错

const path = require('path');
module.exports = {
    entry: './src/js/app.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/bundle.js'
    }
}

打包后在指定位置就会出现一个打包后的js文件，在HTML文件中使用打包后的文件，直接用script标签引入

 

降低耦合性，使用HTML模板在指定地方生成HTML文件和js文件，且文件名不固定随机生成为与本次打包相关的信息，HTML模板无需手动设置script标签引入js文件

使用html-webpack-plugin（插件）

先通过命令行安装插件  npm install html-webpack-plugin --save-dev

配置文件：

模板index.html文件：

打包后的文件目录：

打包后的index文件：（script标签为打包时自动加的）

特别说明：如果在未修改js文件时，进行重新打包，不会再生成新的js文件，新的生成的html文件中自动引入的还是上一次打包后的js文件。因为打包机制中，是使用打包时文件版本对应的hash数来唯一确定一个文件，当文件为修改时，hash数也不会修改。（这段话写的有点乱，不过意思大致在的）

在生成后的html文件中显示插件中特定的数据

插件中的数据定义：

模板文件中引入插件数据的设置：

打包后生成的html文件：（插件中的数据自动填充到HTML文件中）

 

多页面应用中，通过一个模板打包生成多个html文件，且每个文件引用自己所对应的打包后的js文件

webpack.config.js文件中：

引入生成的多个html文件中使用到的JS文件：

建立多个htmlWebpackPlugin插件实例，每个插件实例中写清楚各自生成的html文件的信息：（注意此处的chunks与excludeChunks配合使用）

模板文件index.html内容未发生任何变化:

打包后生成了这些文件：

 

实践源码传送门