webpack配置【六】配置多页面

最新推荐文章于 2021-05-12 21:17:13 发布

高级项目经理

最新推荐文章于 2021-05-12 21:17:13 发布

阅读量167

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_43837268/article/details/98207444

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.修改webpack.config.js【注释掉生成html的插件】

const path=require('path');
//生成html
// const HtmlWebpackPlugin=require('html-webpack-plugin');
//css打包分离
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
//压缩
const BabiliPlugin = require('babili-webpack-plugin');
//分析包的大小
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const PATHS={
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};
//css打包分离
const plugin = new ExtractTextPlugin({
  filename: '[name].css',
  ignoreOrder: true,
}); 

module.exports={
  devServer:{ 
    host: process.env.HOST, //Defaults to 'localhost
    port: 80,  //Defalut to 8080
    // overlay: true captures only errors
    overlay: {
      errors: true,
      warnings: true,
    },
  },
  performance:{
    hints:'warning',//'error'
    maxEntrypointSize: 500000,// bytes
    maxAssetSize: 450000,// bytes
  },
  entry:{
    app:PATHS.app,
    vendor: ['react']
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  //解决开发环境下压缩插件报错问题
  devtool: 'source-map',
  module:{
    rules:[
      {
        test: /\.js$/,
        enforce: 'pre',
        
        loader:'eslint-loader',
        options:{
          emitWarning: true,
        },
      },
      //css打包分离
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: plugin.extract({
          use: {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          fallback : 'style-loader',
        }),
      },
    ],
  },
  
  plugins:[
    //生成html
    // new HtmlWebpackPlugin({
    //   title: 'Webpack demo',
    // }),
    //css打包分离
    plugin,
    //压缩
    new BabiliPlugin(),
    //分析工具
    new BundleAnalyzerPlugin()

  ],
  //分离组件
  optimization: {
    splitChunks: {
        cacheGroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minChunks: 2
            }
        }
    }
  },
};

2.再根目录下创建一个index.html和about.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./build/index.css">
</head>
<body>
    <p>this is index page.</p>
    <!-- 先使用vendor.js，再使用app.js -->
    <script src="./build/vendor.js"></script>
    <script src="./build/index.js"></script>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./build/index.css">
</head>
<body>
    <p>this is about page.</p>
    <!-- 先使用vendor.js，再使用app.js -->
    <script src="./build/vendor.js"></script>
    <script src="./build/about.js"></script>
</body>
</html>

3.再app的文件夹下创建一个about.js

console.log('this is about js output...');

4.修改webpack.config.js

  entry:{
    // app:PATHS.app,
    index: './app/index.js',
    about: './app/about.js',
    vendor: ['react']
  },

5.运行命令

webpack
npm run start

6.路径查看

http://localhost/index.html
http://localhost/about.html

高级项目经理

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack配置【六】配置多页面

1.修改webpack.config.js【注释掉生成html的插件】const path=require('path');//生成html// const HtmlWebpackPlugin=require('html-webpack-plugin');//css打包分离const ExtractTextPlugin = require('extract-text-webpack-...
复制链接

扫一扫

专栏目录