极客观点
项目管理
HarmonyOS
请问这个 collection.html 文件是如何解析 less 文件的？
collection.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 文档兼容模式的定义 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 优先使用webkit内核渲染页面 -->
<meta name="renderer" content="webkit">
<!-- 设置可视区域宽度与设备屏幕缩放比例为1.0 -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="icon" href="./favicon.ico">
<script src="/config/config.js" type="text/javascript"></script>
<link href="/styles/vender.css" rel="stylesheet"></head>
<body>
<div id="root">
<div id="scale">
<header class="main-header">
<div class="main-logo collection-logo"></div>
</header>
<div class="collection">
<div id="lines" style="width: 809px;height: 920px;margin-left: 556px;margin-top: 67px;"></div>
</div>
</div>
</div>
<script type="text/javascript" src="/scripts/vender.js"></script><script type="text/javascript" src="/scripts/collection.js"></script></body>
</html>webpack 的配置
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; //提取公共库
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const CW_NODE_ENV = process.env.CW_NODE_ENV;
let config = {
devtool: "#source-map",
entry: {},
output: {
path: path.resolve(__dirname, 'static'), //编译的目录
filename: 'scripts/[name].js',
publicPath: '/', //发布目录
chunkFilename: "scripts/chunks/[name].chunk.js" // 用于异步加载require.ensure使用
},
resolve: {
alias: {}
},
module: {
rules: [
{
test: /\.less$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!less-loader'
})
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&publicPath=/&outputPath=images/' // <= 8kb的图片base64内联
},
/*{
test: /\.html$/,
loader: 'html-loader'
}*/
]
},
plugins: [
new CommonsChunkPlugin({
name: 'vender',
filename: 'scripts/[name].js'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'production') // production/development
}),
new ExtractTextPlugin({
filename: 'styles/[name].css'
}),
//需要暴露到全局使用的vendor列表
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};
// 页面添加处理
let entry = {
'vender': [
'jquery',
'echarts',
'./src/scripts/common.js'
]
};
const files = fs.readdirSync('src/pages');
for (let i = 0, len = files.length; i < len; i++) {
const file = files[i];
const fileName = file.substring(0, file.lastIndexOf('.html'));
if (fileName) {
const isExists = fs.existsSync(`src/scripts/${fileName}.js`);
const chunks = ['vender'];
if (isExists) {
entry[fileName] = `./src/scripts/${fileName}.js`;
chunks.push(fileName);
}
config.plugins.push(
new HtmlWebpackPlugin({
filename: `${fileName}.html`,
template: `src/pages/${fileName}.html`,
chunks: chunks
}));
}
}
config.entry = entry;
if (CW_NODE_ENV == 'production') {
config.plugins.push(
new UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
module.exports = config;
html没有解析，是webpack负责的。webpack无法识别less文件，所以需要load去帮他转换成能识别的文件，这也是webpack优秀的地方，即通过不同的loader可以实现对不同资源的打包