标签：打包 script 样式 1.0 git license save load lin
前几天有一个同事拿了几张html的文件问我怎么把公共的头部提取出来进行样式修改，我没有办法，也没查出该怎么解决，然后就思考。
怎么样才能实现多个页面共用相同的html代码呢？
于是有了这篇文章。
npm init -ynpm install webpack webpack-cli --save-devnpm install pug-html-loader html-loader --save-dev{
"name": "demo1",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"pug-html-loader": "^1.1.5",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"start": "webpack-dev-server --mode development --open",
"dev": " webpack --mode development",
"build": "webpack --mode production"
}
}‘use strict‘;
const path = require(‘path‘);
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
module.exports = {
entry: {
app: ‘./src/js/index.js‘,
main: ‘./src/js/index.js‘
},
output: {
path: path.resolve(__dirname, ‘dist‘),
filename: ‘js/[name]-[chunkhash].js‘,
},
module: {
rules: [{
test: /\.pug$/,
use: [
‘html-loader‘,
‘pug-html-loader‘
],
}]
},
resolve: {},
devtool: ‘inline-source-map‘,
plugins: [
new CleanWebpackPlugin([‘dist‘]), // 清楚之前生成的文件
new HtmlWebPackPlugin({
template: ‘./src/my-index.pug‘,
chunks: [‘main‘] // 打包时只打包 main.js，可通过此方式实现多页面开发
})
]
};标签：打包 script 样式 1.0 git license save load lin
原文地址：https://www.cnblogs.com/zheng-chuang/p/9201788.html
