Webpack打包与构建_webpack 设置站点虚拟目录-优快云博客

Webpack是一个用于现代JavaScript应用程序的静态模块打包工具，支持CommonJS和ESModule。文章详细介绍了Webpack的打包流程，包括初始化项目、配置文件、本地服务器运行，以及如何解析CSS、SASS和图片资源。同时，还讲解了使用Webpack搭建Vue2和Vue3以及React的开发环境。

Webpack打包与构建

Webpack 打包前端项目
Webpack 构建前端项目

Webpack 打包前端项目

Webpack 官网中文文档

Webpack是基于NodeJS，用于现代JavaScript应用程序的静态模块化打包构建工具。

模块化：

服务端 CommonJS (module.exports，require)
浏览器端 ES Module (export，export default, import {} from xxx)

Webpack 打包

初始化前端项目文件（package.json）

npm init -y
# or
npm i -y

安装相关依赖

npm i webpack webpack-cli -D

编写入口文件（index.js）、模板文件（index.html）
添加脚本命令scripts

{
  "scripts":  {
    "build": "webpack"
  }
}

安装 html-webpack-plugin

npm i html-webpack-plugin -D

配置文件（webpack.config.js）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	target: 'web',
	mode: 'production',
    // 设置入口
	entry: path.resolve(__dirname, 'src/index.js'),
    // 设置出口
	output: {
        // 出口文件名称
		filename: 'js/[name].[chunkhash:8].js',
        // 出口文件路径
		path: path.resolve(__dirname, 'dist'),
        // 清理无用文件
        clean: true
	},
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // 指定模板
            template: './public/index.html',
            // 生成后的文件名称
            filename: 'index.html'
        }),
    ]
}

执行脚本命令 npm run build ，打包JS文件添加到HTML文件中。
Webpack打包过程完成。

Webpack 本地服务器运行

安装webpack-dev-server

npm i webpack-dev-server -D

配置devServer在webpack.config.js中

{
    devServer: {
        port: 8080,
        // 静态目录位置
        static: {
            directory: 'dist'
        }   
    }
}

配置运行脚本

{
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack",
      "dev": "webpack serve"
    },
}

执行命令 npm run dev
通过日志可以查看到访问的地址以及端口，打开浏览器访问即可

Webpack 资源加载器 loader

Webpack 可以构建任何的Web资源（js\json\png\font\video\css\svg eg.）
默认只支持js\json

解析 CSS

css-loader、style-loader

npm i css-loader style-loader -D

{
    // 配置 loader
	module: {
        // 匹配规则
        rules: [
            // 解析 CSS
			{   
				test: /\.css$/,
				use: [
					{
						loader: 'style-loader'
					},
					{
						loader: 'css-loader'
					}
				]
			}, 
        ]
    }
}

mini-css-extract-plugin

npm i mini-css-extract-plugin -D

{
    // 配置 loader
	module: {
        // 匹配规则
        rules: [
            // 解析 CSS
			{   
				test: /\.css$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader // 代替 style-loader
					},
					{
						loader: 'css-loader'
					}
				]
			}, 
        ]
    },
    // 配置插件
	plugins: [
		new MiniCssExtractPlugin({
			filename: `[name].css`
		}),
    ]
}

解析 SASS

npm i dart-sass sass sass-loader -D

{
    // 配置 loader
	module: {
        // 匹配规则
        rules: [
            // 解析 CSS
			{   
				test: /\.s[ac]ss$/,
				use: ['style-loader','css-loader','sass-loader']
			}, 
        ]
    }
}

解析图片

Webpack@5 之前，需要引入url-loader file-loader

npm i url-loader file-loader -D

{
    // 配置 loader
	module: {
        // 匹配规则
        rules: [
            // 解析 CSS
			{   
				test: /\.(jpg|jpeg|gif|png|svg)$/i,
				use: ['url-loader','file-loader']
			}, 
        ]
    }
}

Webpack@5 之后，只需要配置就好，会将打包后的静态资源统打包到某一目录下

{
    // 配置 loader
	module: {
        // 匹配规则
        rules: [
            // 解析 CSS
			{   
				test: /\.(jpg|jpeg|gif|png|svg)$/i,
				type: 'asset/resource'
			}, 
        ]
    }
}

Webpack 构建前端项目

以下，使用 Webpack 搭建环境的内容，都是基于 Webpack 打包前端项目的

webpack 与 vue@2 环境搭建

官方学习文档教程2.x

引入vue的依赖版本需要注意，现在官方主推的是vue@3

npm i vue@2 vue-router@3 vuex@3 -S

npm i vue-loader@15.9.8 vue-template-compiler -D

修改配置文件（webpack.config.js）

'use strict'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[name][ext]'
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    compress: true,
    port: 8088
  }
}

添加文件app.vue作为初始化渲染的容器

<template>
<router-view></router-view>
</template>

<script>
export default {}
</script>

<style>
</style>

编写home.vue，index.vue，供页面路由跳转访问
修改index.js引入vue@2

import Vue from 'vue';
import VueRouter from 'vue-router';

import appView from 'app.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    },
    {
      path: '/home',
      component: require('./home.vue').default
    }
  ]
});

new Vue({
  el: '#app',   // 渲染模板DOM
  router,   // 路由
  render(h) { return h(appView) }   // 初始化渲染内容
})

webpack 与 vue@3 环境搭建

官方学习文档教程3.x

安装vue@3的相关依赖

# 卸载 vue@2 的依赖
npm uninstall vue-template-compiler vue-loader
# 安装 vue@3 的依赖
npm i vue@3 vue-router@4 vuex@4 -S

npm i vue-loader@17 @vue/compiler-sfc -D

修改配置文件（webpack.config.js）

'use strict'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[name][ext]'
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    }),
    new VueLoaderPlugin()
  ],
  devServer: {
    compress: true,
    port: 8088
  }
}

路由方式为按需导入

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: require('@/pages/index.vue').default
  },
  {
    path: '/about',
    component: require('@/pages/about.vue').default
  },
  {
    path: '/:catchAll(.*)', // 路由未匹配时使用 '/:catchAll(.*)'
    component: require('@/pages/404.vue').default
  }
];

const router = createRouter({
    // createWebHashHistory \ createWebHistory \ createMemoryHistory
  history: createWebHashHistory(),
  routes
});

export default router;

数仓也是按需导入

import { createStore } from 'vuex';

const store = createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {}
});

export default store;

修改index.js引入vue@3

import { createApp } from 'vue'

import App from '@/app.vue';
import router from '@/router';
import store from '@/store';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

webpack 与 React 环境搭建

React 官方中文文档

安装React的相关依赖

npm install react react-dom --save-dev

不需要修改配置文件（webpack.config.js）
路由使用

npm i -S react-router-dom

状态管理

npm i redux react-redux -D

babel对react进行转译为js使其能够执行在浏览器中运行

npm i @babel/core @babel/preset-env babel-loader @babel/plugin-transform-runtime @babel/preset-react -D

// .babelrc 文件
{
   "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": ["@babel/plugin-transform-runtime"]
}

修改index.js，引入React 生命周期（类组件与函数组件）

import AppChild from './AppChild';
class App extends Component {
  render() {
    let { age } = this.state;
    console.log('App -- render');
    return (
      <div>
        <AppChild age={age} />
      </div>
    )
  }
}
export default App;