wepack4 搭建多页面脚手架学习
*学习项目，很多配置可能有问题
前言：以前刚接触 webpack 的时候还是 1，当时大概过了下文档操作了一下当时写的一些注释。后来开发的时候基本写 react 都是用的 create-react-app 或者找别人的搭好的脚手架用。 webpack4 刚出也不算久，重新学习加复习下 webpack 的一些知识。
一些升级到 webpack4 的 tips:
- extract-text-webpack-plugin 必须 4+版本才可以在 webpack4 中用
- webpack4 中必须提供 mode 参数，process.env.NODE_ENV 的值为 production 或 development
该脚手架目前基本可用开发小型多页面。
使用
npm i
npm run dev // 开发模式 8000端口
npm run build // 构建
特性相关
babel
babel 的强大性不多说了。我们写前端最重要的就是装 x。使用各种高大上的 ES6789 语法来写 js，但是浏览器不兼容就需要 babel 来进行转码了。
- babel 是不转换新的关键字那些语法。需要通过
yarn add babel-plugin-transform-runtime --dev和yarn add babel-runtime --save。再.babelrc 中配置。参考
jquery 全局加载
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
css 样式抽离和热更新
引入 normalize.css 消除浏览器差异
一般都是使用 extract-text-webpack-plugin 来实现 css 样式抽离，但是抽离的样式是不支持热更新的。在 webpack4 的文档中，官方也推荐我们使用 mini-css-extract-plugin 代替 extract-text-webpack-plugin，并且该 plugin 配合 css-hot-loader 可以实现样式抽离和热刷新的。
postcss
autoprefixer css 自动添加前缀
添加类似模板那样的头部、尾部、身部页面拼装
<!DOCTYPE html>
<html lang="en">
<head>
${require('../common/meta.html')}
</head>
<body>
<div>首页111</div>
</body>
</html>
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
interpolate: 'require'
}
}],
}
根据 src 目录下的目录结构自动生成 html 模板和配置 webpack 的入口文件
这样就不需要手动去设置 entry 和 Pugin 中手动生成 html 了
我们约定了目录结构如下
- src\
- index\ index 页面 - index.js 入口 js 文件 - index.html - index.css - other\
- index.js - index.html - index.css - other2\
- index.js - index.html - index.css
每个 src 下的一级子目录都是一个页面，该目录内的 index.html 为 html 文件，index.js 是入口文件
我们在 webpack 构建中要做的操作就是
1、扫描 src 目录下，取得 index other other…这些目录名，然后把目录名作为输入的 HtmlWebpackPlugin 生成 html 的文件名，并且引用对应的 js
2、设置入口的 entry 参数
function buildEntriesAndHTML() {
// 用来构建entery
const result = glob.sync("src/**/*.js");
const config = {
hash: true,
inject: true
};
const entries = {};
const htmls = [];
result.forEach(item => {
const one = path.parse(item);
entries[one.dir.split("/").slice(-1)[0]] = "./" + item;
htmls.push(
new HtmlWebpackPlugin({
...config,
template: "./" + one.dir + "/index.html",
chunks: [item]
})
);
});
return {
entries,
htmls
};
}
html 热更新（应该说是刷新）
jq 多页面应用肯定是要在页面里面写一堆 html 的，默认情况下 webpack server html 是不会热更新，html-webpack-plugin 是不会触发 HMR 的。
通过 raw-loader 插件，开发模式下在每个页面的入口把页面的 htmlrequire 进去即可,这样就能实现热刷新了
if (process.env.NODE_ENV === "development") {
require("./index.html");
}
这样每个文件引入似乎很傻。应该让工具自动化操作，应该要写个 loader 在指定文件开头注入上面那段代码，然后再给 babel 处理。根目录下自己写了个 inject-loader。loader 的原理其实就是接受上次的处理结果，把返回值传给下个 loader 使用。我们在 js 文件 babel 处理前使用该 loader 即可
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true // 使用缓存
}
}, {
loader: path.resolve("./inject-loader.js") // 开发模式使用注入代码实现html热更新
}]
}
//inject-loader.js
const path = require("path");
module.exports = function(source) {
if (path.basename(this.resourcePath) === "index.js") {
// 我们约定好只有index.js才会注入注入加载代码
return (
`if (process.env.NODE_ENV === "development") {
require("./index.html");
};` + source
);
}
return source;
};
这样一个简单的 loader 就完成了，实现了自动化注入 html 热刷新代码
eslint 代码规范化
todo
代吗格式化
.editorconfig + vscode 插件 Prettier - Code formatter
开发环境和生产环境两份配置
webpack -config ./webpack.xxx.js
- webpack.base.config.js 公用配置
- webpack.dev.config.js 开发环境配置
- webpack.prod.config.js 生产环境配置
本人水平有限，有不足敬请大佬指出。
只作为一个学习项目。一些缓存优化和分包加载方面的内容尚未考虑。
todo：补充一个简单的 demo
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
