wepack4搭建多页面脚手架学习
本文代码地址在github
前言:以前刚接触webpack的时候还是1,当时大概过了下文档操作了一下当时写的一些注释。后来开发的时候基本写react都是用的create-react-app或者找别人的搭好的脚手架用。所以趁着这段时间的间隙加上webpack4刚出也不算久,重新学习加复习下webpack的一些知识。
几个小tips:
- extract-text-webpack-plugin必须4+版本才可以在webpack4中用
- webpack4中提供mode参数后,process.env.NODE_ENV的值为production或development
该配置目前进度:基本可用开发小型多页面。详细可见github,欢迎大佬们提供issue或施舍个star2333
使用
yarn
yarn dev // 开发模式 8000端口
yarn build // 构建
复制代码
babel
babel的强大性不多说了。我们写前端最重要的就是装x。使用各种高大上的ES6789语法来写js,但是浏览器不兼容就需要babel来进行转码了。
- babel是不转换新的关键字那些语法。需要通过
yarn add babel-plugin-transform-runtime --dev
和yarn add babel-runtime --save
。再.babelrc中配置。参考
css样式抽离和热更新
引入normalize.css消除浏览器差异
一般都是使用extract-text-webpack-plugin来实现css样式抽离,但是抽离的样式是不支持热更新的,webpack默认只支持内联样式的热更新。在webpack4的文档中,官方也推荐我们使用mini-css-extract-plugin代替extract-text-webpack-plugin,并且该plugin配合css-hot-loader可以实现样式抽离和热刷新的。所以我们项目采用了用mini-css-extract-plugin+css-hot-loader的方式。
{
test: /\.css$/,
use: [
'css-hot-loader', //支持热更新
MiniCssExtractPlugin.loader,
"css-loader"
]
}
复制代码
postcss
postcss 是一个css后处理工具,能让我们提前使用下一代css语法,帮我们根据配置的目标浏览器编译出浏览器能用的css代码 todo
css_module
写react比较常用的 todo
添加类似模板那样的头部、尾部、身部页面拼装
todo
根据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
- index\ index页面
我们要做的操作就是
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进去即可,这样就能实现热刷新了23333
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就完成了2333,实现了自动化注入html热刷新代码
开发环境和生产环境两份配置
webpack -config ./webpack.xxx.js
复制代码
webpack.base.config.js 公用配置 webpack.dev.config.js 开发环境配置 webpack.prod.config.js 生产环境配置
本人水平有限,有不足敬请大佬指出。 只作为一个学习项目。一些缓存优化和分包加载方面的内容尚未考虑。todo