阅读 154

webpack5 实现多页面项目打包

简易搭建流程

1.npm初始化

在cmd命令行中进入项目文件夹

npm init -y
复制代码

自动生成package.jsonpackage-lock.json文件

2.新建项目文件

新建

-dist
-src
    -css
    -js
    -img
    -demo
-webpack.config.js
复制代码

3.Webpack 配置

安装 Webpack

npm i webpack webpack-cli -D或npm install -D webpack-cli
复制代码

自动生成node_modules文件夹

webpack.config.js入口配置

module.exports = {
  entry: {
    page1: "./src/pages/page1/index.js",
    page2: "./src/pages/page2/index.js",
    // ...
  },
复制代码

webpack.config.js输出配置

//webpack项目绝对路径
const { resolve } = require('path')

module.exports = {
  entry: {
    page1: "./src/pages/page1/index.js",
    page2: "./src/pages/page2/index.js",
    // ...
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    //name 即 page1 page2
    filename: "[name]/index.js",
  },
复制代码

插件安装+配置

jquery 插件

npm i -D jquery
复制代码

babel 插件

npm i -D babel-loader @babel/core @babel/preset-env
复制代码
module.exports = {
  ...
  module: {
    rules: [
      {
        //匹配文件类型
        test: /\.jsx?$/,
        //不加载这些文件夹
        exclude: /(node_modules|bower_components)/,
        //使用哪些加载器
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
复制代码

css-loader style-loader 插件

npm i -D css-loader style-loader
复制代码
module: {
        rules: [
            {
                test: /\.css$/,
                use:['style-loader','css-loader']

            }
        ]
    },
复制代码

file-loader url-loader 插件

npm i -D file-loader url-loader
复制代码
module: {
        rules: [
            {
                test:/\.(jpg|png|gif|PNG)$/,
                loader:'url-loader',
                options: {
                    limit: 8 * 1024,
                    name:'[hash:10].[ext]'
                },
                //include 从那个文件夹里获取
                //include: [resolve('static'),resolve('src')],
            }
        ]
    },
复制代码

html-webpack-plugin 插件

npm i -D html-webpack-plugin
复制代码
//生成单页
const  HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
        new HtmlWebpackPlugin({
            filename: "page1/index.html",
            //选择entry入口文件引入
            chunks: ['page1],
            template: "./src/demo/page/page1/index.html"
        }),
        new HtmlWebpackPlugin({
            filename: "page2/index.html",
            //选择entry入口文件引入
            chunks: ['page2],
            template: "./src/demo/page/page2/index.html"
        }),
        new HtmlWebpackPlugin({
            filename: "page3/index.html",
            //选择entry入口文件引入
            chunks: ['page3],
            template: "./src/demo/page/page3/index.html"
        }),
    ],
复制代码

clean-webpack-plugin 插件

npm i -D clean-webpack-plugin
复制代码
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

plugins: [
       new CleanWebpackPlugin()
    ],
复制代码

webpack-dev-server 插件

npm i -D webpack-dev-server
复制代码
"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
  },
复制代码
devServer: {
        //服务器基本目录
        contentBase:resolve(__dirname,'dist'),
        compress:true,
        //端口
        port:8080,
        //自动打开页面
        open:true
    },
复制代码

补充知识:blog.csdn.net/lunahaijiao…

文章分类
开发工具
文章标签