关于webpack安装配置多页面

1. 安装

配置node环境 npm install webpack webpack-cli --save-dev 安装

## 2.生成json文件

npm init

## 3.新建文件 webpack.config.js并配置js文件。

- 入口

- 出口

• 插件

• loader的配置

• 文件太大警告禁用

• 打包公共文件代码

• 配置IP和端口号

• 附代码

const {resolve} = require('path')；

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')；

const config={

mode: 'development',
//入口
entry: {
    'indexnew': __dirname + '/modules/index.js',
    'threedayplanLook': __dirname + '/modules/index.js',
},
//出口
output: {
    //输出文件名
    path:resolve(__dirname,'./dist'),
    filename:'js/[name]/[name]-bundle.[contenthash:8].js',
    chunkFilename: 'js/[name]/[name]-bundle.[contenthash:8].js'
    // filename: '[name]_bundle_[hash].js',
    // filename: '[name].js',
    // sourceMapFilename: './[name]-[chunkhash].map'
},
//插件
plugins:[
    //默认情况下会创建一个空的html文件，并引入打包的js/css等资源文件，默认为 new      HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
        template: './indexnew.html',
        filename:'indexnew.html',
        chunks: ['indexnew']
        // favicon:resolve(__dirname,'./dist/favicon.ico')
    }),
    new HtmlWebpackPlugin({
        template: './threedayplanLook.html',
        filename:'threedayplanLook.html',
        chunks: ['threedayplanLook']
    }),
],
  //loader 的配置
  module:{
    //详细loader配置
    rules:[
        //css 配置
        {
            test:/\.css$/,//匹配哪些文件
            use:[//loader 执行顺序是 从右到左，从后到前，需要安装对应的loader,注意需要安装 less 工具 npm i less -D: npm i css-loader style-loader less less-loader -D
                'style-loader',
                'css-loader'//将css文件内容变成 commonjs 模块加载到js中，里面内容是样式字符串
            ]//使用哪些loader进行处理
        }
    ]
},
//打包文件大小太大警告 禁用
performance :{
    hints:false
},
optimization: {
    splitChunks: {
      cacheGroups: {
        // 打包业务中公共代码
        common: {
          name: "common",
          chunks: "initial",
          minSize: 1,
          priority: 0,
          minChunks: 2, // 同时引用了2次才打包
        },
        // 打包第三方库的文件
        vendor: {
          name: "vendor",
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial",
          priority: 10,
          minChunks: 2, // 同时引用了2次才打包
        }
      }
    },
    runtimeChunk: { name: 'manifest' } // 运行时代码
  },
  devServer: {
    port: 1111
  },

} module.exports = config;