小白学 Webpack之打包多个页面,分配不同 JS 文件

多个页面打包

webpack 打包多个文件,多个入口文件,实现多个文件输出。
packge.json

{
  "name": "webpack3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "autoprefixer": "^8.0.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "eslint": "^7.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-webpack-plugin": "^2.1.0",
    "file-loader": "^6.1.1",
    "html-loader": "^1.3.2",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.12.2",
    "less-loader": "^7.0.2",
    "mini-css-extract-plugin": "^1.0.0",
    "postcss-loader": "^4.0.4",
    "postcss-preset-env": "^6.7.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "scss": "^0.2.4",
    "scss-loader": "0.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  }
}

安装好项目之后,流程我们整理下

  • 修改入口文件,原来单个文件,写成对象组成多个入口文件
  • 修改输出文件,不能写死
  • HtmlWebpackPlugin 插件多少输出,即可输出多个入口文件,分离使用JS入口文件

项目文件

|-- postcss.config.js
|-- src
|   |-- index.html
|   `-- js
|       |-- about.js
|       `-- index.js
`-- webpack.config.js

所以webpack.config.js配置如下

const path = require('path');

//插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  //入口文件
  entry: {
    index: './src/js/index.js',
    about: './src/js/about.js',
  },
  output: {
    //文件名
    filename: 'js/[name].js',//这里需要修改成输出文件,不能写死
    path: path.resolve(__dirname, './dist/'),
    publicPath: '',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html",
      chunks:['index','about']//分块使用什么入库文件
    }),
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'about.html',
      template: "./src/index.html",
      chunks:['about']
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    }),
    new ESLintPlugin({
      files:'./src'
    })

  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }
          ,
          {loader: 'css-loader', options: {importLoaders: 1}},
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          }
          ,
          {loader: 'css-loader', options: {importLoaders: 1}},
          'less-loader', "postcss-loader"
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader: 'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options: {
          limit: 1024 * 14,//设置图片大小小于这个则用base64 14KB转成base64
          name: '[name].[ext]', //打包存储位置
          outputPath: 'img'//打包目录
        }
      },
      {
        test: /\.html$/,
        use: ['html-loader']

      },
      // {
      //   enforce: 'pre',
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'eslint-loader',
      // },

      {
        test: /\.js$/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env'
          ]
        }
      }

    ]
  }
}

webpack 一下

|-- dist
|   |-- about.html
|   |-- index.html
|   `-- js
|       |-- about.js
|       |-- about.js.map
|       |-- index.js
|       `-- index.js.map

搞定

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。