webpack4 + ejs 构建多页应用

目录结构

├─build webpack配置目录
│ ├─plugins.js
│ ├─rules.js
│ ├─transfromAssets.js //简单的一个插件，处理路径问题
│ └─webpack.config.js
└─src
├─components ejs公用组件目录
├─css
├─js
├─index.ejs 模板文件
└─about.ejs

源码地址：github

使用ejs模板

安装 ejs-loader、html-loader
在 src根节点创建ejs文件，作为html的模板
使用html-webpack-plugin引入ejs模板

index.ejs 需要向header.ejs传入htmlWebpackPlugin，否则html-webpack-plugin配置的title可能会不起作用

<%= require('./components/header.ejs')({path:'index',htmlWebpackPlugin}) %>
<div id="root">
  内容
</div>
<%= require('./components/footer.ejs')() %>

header.ejs

<head>
  <meta charset="utf-8">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

webpack plugins，因为是多个页面，所以通过for循环插入HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
const plugins = [];
...
nav.forEach(value => {
  plugins.push(
    new HtmlWebpackPlugin({
      filename: `${value.path}.html`,
      template: path.resolve(__dirname, '../src', `${value.path}.ejs`),
      inject: true,
      chunks: ['common', value.path],
      favicon: './src/assets/img/favicon.ico',
      title: 'title',
      minify: {
        collapseWhitespace: true
      }
    })
  )
})
...

处理css

使用了less，所以需要安装loader：css-loader、less-loader
添加浏览器前缀，兼容不同版本浏览器，需要安装postcss-loader、autoprefixer
需要压缩生成的css文件，安装插件：optimize-css-assets-webpack-plugin、cssnano
将css分离成css文件，安装mini-css-extract-plugin

处理js

安装下babel-loader、@babel/core、@babel/preset-env，处理es6的语法。

webpack配置

plugins.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');
const TransfromAssets = require('./transfromAssets');
const path = require('path');
const nav = require(`../src/data.js`).nav;
const plugins = [];

nav.forEach(value => {
  plugins.push(
    new HtmlWebpackPlugin({
      filename: `${value.path}.html`,
      template: path.resolve(__dirname, '../src', `${value.path}.ejs`),
      inject: true,
      chunks: ['common', value.path],
      favicon: './src/assets/img/favicon.ico',
      title: 'title',
      minify: {
        collapseWhitespace: true
      }
    })
  )
})
const otherPlugins = [
  new MiniCssExtractPlugin({
    filename: '[name].[hash:8].css',
    chunkFilename: '[id].css',
  }),
  new optimizeCss({
    assetNameRegExp: /\.css$/g,
    cssProcessor: require('cssnano'),
    cssProcessorOptions: {
      discardComments: {
        removeAll: true
      }
    },
    canPrint: true
  }),
  new TransfromAssets()
];
plugins.splice(nav.length, 0, ...otherPlugins);
module.exports = plugins;

rules.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = [{
    test: /\.(c|le)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      {
        loader: "postcss-loader",
        options: {
          plugins: [
            require("autoprefixer")
          ]
        }
      },
      'less-loader'
    ]
  },
  {
    test: /\.js$/, //js文件加载器
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env']
      }
    }
  },
  {
    test: /\.html$/,
    use: [{
      loader: 'html-loader',
      options: {
        interpolate: true,
        minimize: false
      }
    }]
  }, {
    test: /\.ejs/,
    use: ['ejs-loader'],
  }
]

transfromAssets.js 一个插件，作用：

将common.js删掉（common.js引入了公用的css，css有用但js无用所以就删啦）
将js、css存放至单独的目录，并将html里路径指向正确的路径

function TransfromAssets(options) {};//也可以是一个类
TransfromAssets.prototype.apply = function(compiler) {
  compiler.plugin('emit', function(compilation, callback) {
    for (var filename in compilation.assets) {
      if (/common.*js$/.test(filename)) {
        delete compilation.assets[filename];
        continue;
      }
      if (/.*[js|css]$/.test(filename)) {
        let type = /.*js$/.test(filename) ? 'js' : 'css';
        let source = compilation.assets[filename].source();
        let size = compilation.assets[filename].size();
        compilation.assets[`${type}/${filename}`] = {
          source: () => source,
          size: () => size
        }
        delete compilation.assets[filename];
      }
      if (/html$/.test(filename)) {
        let source = compilation.assets[filename].source();
        source = source.replace(/\<script.*?<\/script>/ig, value => ~value.indexOf('common') ? '' : value);
        source = source.replace(/href=\"\S+?.css\"/ig, value => value.slice(0, 6) + 'css/' + value.slice(6));
        source = source.replace(/src=\".*?.js\"/ig, value => value.slice(0, 5) + 'js/' + value.slice(5));
        compilation.assets[filename].source = () => source;
      }
    }
    callback();
  })
};
module.exports = TransfromAssets;

webpack.config.js

const path = require('path');
const plugins = require('./plugins');
const rules = require('./rules');

module.exports = {
  entry: {
    common: '@src/js/common.js',
    index: '@src/js/index.js',
    detail: '@src/js/list.js',
  },
  output: {
    path: path.resolve(__dirname, '../dist/'),
    filename: "[name].[hash:8].js"
  },
  devServer: {
    inline: true,
    historyApiFallback: true,
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, '..'),
      '@src': path.join(__dirname, '..', 'src')
    }
  },
  module: {
    rules
  },
  plugins
}

webpack4 + ejs 构建多页应用

使用ejs模板

处理css

处理js

webpack配置

猜你喜欢