前言
隔了这么多天没写技术文章了, 因为最近在构思一部小说, 哈哈哈, 但是空闲时间还是在研究 webpack 的东西, 这两天看了下 webpack, 看到了一个库叫 html-webpack-plugin, 今天我就来好好给大家说一下这个库的作用, 前几节课讲的东西都太简单了, 而且有点乱的感觉, 最近整理了一下思路, 重新给大家走一遍流程.
本系列教程如下表所示:
发布时间 | 发布内容 |
---|---|
2018-03-05 | Weapack 傻瓜式入门教程 - 01 |
2018-03-07 | Weapack 傻瓜式入门教程 - 02 |
2018-04-01 | Weapack 傻瓜式入门教程 - 03 |
2018-04-09 |
步骤
webstorm 新建一个项目, 这里我以 webpack-demo 为例.
执行 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": {}
- }
项目根路径下新建文件, 这里以 dist 和 src 为例,
项目结构图
安装必要的库, 如下所示:
- {
- "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 必要库
- }
- }
在 src 下新建 js 文件和 less 文件, js 中使用任意 ES6 语法, less 中随意, 这里以指定 body 的背景颜色, 方便看效果, 结构如下:
项目结构图
创建必要的文件 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
- })
- ]
- }
指定运行环境, 配置 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 自动刷新, 一起使用, 效果更好
后言
本节教程带着大家走了一遍流程, 从创建文件到文件生成使用, 多练习一下, 领悟其中每句代码的含义, 其实并不难, 在自学的道路上, 唯有自己找答案, 因为别人不会告诉你, 加油, 各位自学的朋友们.
来源: http://www.jianshu.com/p/4ef7deb3ab1c