webpack傻瓜式入门教程-04

前言

  隔了这么多天没写技术文章了，因为最近在构思一部小说，哈哈哈，但是空闲时间还是在研究webpack的东西，这两天看了下webpack，看到了一个库叫html-webpack-plugin，今天我就来好好给大家说一下这个库的作用，前几节课讲的东西都太简单了，而且有点乱的感觉，最近整理了一下思路，重新给大家走一遍流程。

目录

https://www.jianshu.com/p/9c9b555b52e8

步骤

1. webstorm新建一个项目，这里我以webpack-demo为例。
2. 执行 npm init 初始化项目，自动生成package.json文件，如下所示：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "demigodliu",
  "license": "ISC",
  "devDependencies": {}
}

3. 项目根路径下新建文件，这里以dist和src为例，
   项目结构图
4. 安装必要的库，如下所示：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "webpack demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "demigodliu",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.4", // es6 -> es5必要库
    "babel-preset-es2015": "^6.24.1", // es6 -> es5必要库[按照es2015这个版本来转]
    "css-loader": "^0.28.11", // 解析css代码
    "html-webpack-plugin": "^3.2.0", // 生成html的库
    "less": "^3.0.1", // 解析less的必要库
    "less-loader": "^4.1.0", // 解析less的loader
    "style-loader": "^0.20.3", // 将css以内嵌式插入h5的必要库
    "webpack": "^4.5.0", // webpack必要库
    "webpack-cli": "^2.0.14" // webpack必要库
  }
}

5. 在src下新建js文件和less文件，js中使用任意ES6语法，less中随意，这里以指定body的背景颜色，方便看效果，结构如下：
   项目结构图
6. 创建必要的文件webpack.config.js和.babelrc两个配置文件，如下所示
   .babelrc

{
  "presets": [
    "es2015"
  ]
}

webpack.config.js

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: { // 入口文件
        home: './src/script/home/home.js', 
        jquery: './src/script/jquery/jquery.js'
    },
    output: { // 编译后文件
        path: path.resolve(__dirname, "dist"),
        //publicPath: "http://xxxxxx", // 正式上线的路径
        filename: "js/[name]/[name].js"
    },
    module: {
        rules: [
            {
                test: /\.less$/, // 处理less文件
                exclude: /node-modules/,  // 规避掉node_modules文件
                include: path.resolve(__dirname, "src/style/"), // 指定解析文件路径
                loader: "style-loader!css-loader!less-loader" // 使用的解析库
            },{
                test: /\.js$/,
                exclude: /node-modules/,
                include: path.resolve(__dirname, "src/script/"),
                loader: "babel-loader",
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({  // 本节课的重头戏！！！！！！
            template: "template.html", // 模板文件
            filename: "html/home/home.html", // 编译后的文件名称
            title: "webpack title", // 指定编译后的H5标题
            inject: true, // true=body[静态文件编译到body底部]，head[编译到head中]
            hash: true, // 给静态文件添加hash值，和output-filename中指定chunkhash效果差不多
            showErrors: true, // 如果编译出错，错误直接显示在页面中，方便排错
            chunks: ["jquery"] // 指定哪些静态文件打包进H5,
            excludeChunks: ["home"] // 指定哪些静态文件不需要打包进H5
            html5: true, // 以H5标准模式来引入格式
            minify: {
                collapseWhitespace: true, // 去掉所有空格
                removeAttributeQuotes: true // 去掉所有不必要的引号
            },
            cache: true, // 文件变化才重新编译
            chunksSortMode: "dependency", // 引入顺序： 根据依赖关系
            xhtml: true // 兼容xhtml模式编译H5
        })
    ]
}

7. 指定运行环境，配置webpack运行指令，如下所示：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --color --display-error-details --p --progress --watch"
  }
// --color：控制台日志颜色
// --display-error-details：显示错误详情信息
// --p：压缩混淆
// --progress：显示打包编译的进度条
// --watch：监听文件，若有变化，自动打包，配合上节课的webpack-dev-server自动刷新，一起使用，效果更好

后言

  本节教程带着大家走了一遍流程，从创建文件到文件生成使用，多练习一下，领悟其中每句代码的含义，其实并不难，在自学的道路上，唯有自己找答案，因为别人不会告诉你，加油，各位自学的朋友们。

说明

原创作品，禁止转载和伪原创，违者必究！