Webpack多页面配置

·  阅读 172

准备

$ mkdir webpack-multi-page-demo
$ cd webpack-multi-page-demo
$ mkdir src
$ npm init -y
复制代码

安装依赖

$ npm install webpack webpack-cli html-webpack-plugin --save-dev
复制代码

创建多个页面js

$ touch home.js
复制代码
//home.js
export default function index() {
  return 'Home Page';
} 

document.getElementById('app').innerHTML = index();
复制代码
$ touch blog.js
复制代码
//blog.js
export default function index() {
  return 'Blog Page';
} 

document.getElementById('app').innerHTML = index();
复制代码
$ touch about.js
复制代码
//about.js
export default function index() {
  return 'About Page';
} 

document.getElementById('app').innerHTML = index();
复制代码
$ touch template.html
复制代码
//template.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
 	<body>
    <div id="app"></div>
  </body>
</html>
复制代码

此时项目文件结构:

src
--about.js
--blog.js
--home.js
--template.html
复制代码

创建webpack.config.js

$ touch webpack.config.js
复制代码
//webpack.config.js

const path = require('path');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');

//多个页面
const pages = ['home','blog','about'];

//入口
let entry = {};

//插件
let plugins = [];

const init = () => {
	pages.map(name => {
	  plugins.push(
	  	new HtmlWebpackPlugin({
				minify: false, //是否压缩
		    title: name,  //页面标题
		    template: path.join(__dirname,`/src/template.html`), //模板文件
		    filename: path.join(__dirname,`/dist/${name}.html`), //输出文件名
		    inject: 'body',//脚本放置页面位置
		    chunks: [name],
		    hash: false
		  })
	  );
	  entry[name] = `./src/${name}.js`
	});
}

init();

module.exports = {
  entry: entry,

  output: {
    filename: '[name]-[contenthash].js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: plugins
};
复制代码

安装serve

$ npm install serve
复制代码

添加npm scripts

{
   "scripts": {
      "clean": "rm -rf dist/",
      "build": "npm run clean && webpack --config webpack.config.js",
      "start": "serve dist"
   },
}
复制代码

完整代码

github.com/pengjielee/…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改