webpack 为自动化构建工具，将项目中的文件，打包成静态文件，可以直接运行 html 文件来开启项目，打包后的项目叫做，生产环境
安装 webpack
创建一个项目文件夹： mkdir 或者直接右键来新建文件夹
打开终端 cd 到刚创建的文件夹中 01-webpack-app
创建一个 package.json ，npm init -y （-y 是一路回车 yes）
安装依赖包: npm install webpack webpack-cli --save-dev
项目目录
01-webpack-app
public（静态资源文件夹）
index.html （项目唯一的 html 文件）
src (写代码的地方)
main.js （入口 js 文件）
webpack.config.js (项目的配置文件)
配置入口和出口
// 用来获取设置路径用的
const path = require('path')
// 就是 webpack 的配置
module.exports = {
// 配置环境
// development： 开发环境(写代码的阶段)
// production: 生产环境(代码已经写好了部署到服务器的代码)
// production: 测试环境(代码已经写好了，但是还没有部署到服务器的代码)
mode: 'development',
// 配置项目入口
// entry: './src/main.js'
entry: {
app: './src/main.js'
},
// 配置项目的出口
output: {
// 设置打包之后文件放在 dist 目录下
// __dirname 获取到的是当前文件所在的目录路径
path: path.resolve(__dirname, 'dist'),
// filename 配置文件打包后的名字
// [name] 获取入口名称 app
// [hash:8] 随机 8 位字符
// .js 就是我们的后缀名
// app.adj23gh5.js
filename: '[name].[hash:8].js',
// 清除之前打包的文件，有新的文件后，之前的文件就不用了
clean: true
}
}执行命令： webpack
如果提示你 webpack 命令无法使用，那么你可以尝试先全局安装 webpack 和 webpack-cli
npm i -g webpack webpack-cli
如果全局安装了之后还不能使用，那么可以使用 npx webpack 在进行尝试打包
如果还是不能使用，那么你就要叫我一下.
npx webpack, npx 就是使用最新的 webpack 进行打包处理
打包 html 文件
打包之后 dist 文件夹中要配置 html 文件，而且要让 html 文件和入口 js 文件产生联系，所谓的产生联系
其实就是让 html 中自动导入 js 或者 css 文件
安装： npm i html-webpack-plugin
配置插件，导入插件：
// 导入 html 的打包插件 const HtmlWebpackPlugin = require('html-webpack-plugin')
配置 plugins
// 就是 webpack 的配置 module.exports = { ... // 配置插件的地方 plugins: [ // 将 ./public/index.html 配置为咱们的主要 html 文件 // 要打包的 html 文件 new HtmlWebpackPlugin({ template: './public/index.html' }) ] }
打包 css 文件
配置 css 的样式加载器(解析器)
在 main.js 中通过 import 导入 css 文件的时候会给出以下报错
ERROR in ./src/main.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> * {
| background-color: red;
| }
@ ./src/main.js 1:0-19告诉我们需要使用加载器进行加载
安装加载器： npm i style-loader css-loader
配置以 .css 结尾的文件使用对应的加载器
执行打包命令
打包之后发现 css 文件中的代码被打包到 js 文件中了
配置样式文件打包独立文件
先安装独立配置 css 文件的插件
安装命令： npm i mini-css-extract-plugin
导入插件
// 导入 css 独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')使用插件
// 就是 webpack 的配置
module.exports = {
...
// 配置插件的地方
plugins: [
...
// 配置打包独立 css 文件之后的名称
new MiniCssExtractPlugin({
filename: 'css/[hash:8].css'
})
],
// 加载器的配置
module: {
rules: [
// 配置 .css 结尾的文件使用对应的加载器
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
}
}第一步导入插件，第二步使用插件，第三步是配置加载器
less 配置
我们将原来的 css 文件改为 .less 结尾的文件后报错
该报错是告诉我们需要使用 less 的加载器
ERROR in ./src/main.less 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> * {
| background-color: red;
| }
@ ./src/main.js 1:0-20先安装 less 的加载器
安装命令： npm i less less-loader
配置 .less 结尾的文件使用对应的加载器
// 就是 webpack 的配置
module.exports = {
...
// 加载器的配置
module: {
rules: [
// 配置 .css 结尾的文件使用对应的加载器
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}
]
}
}sass 配置
如果想支持 scss 文件
此时我们需要先配置 sass 的加载器
安装命令：npm i node-sass sass-loader
// 加载器的配置
module: {
rules: [
// 配置 .css 结尾的文件使用对应的加载器
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
},{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
},{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
}
react 配置
react
安装： npm i react react-dom @babel/core babel-loader @babel/preset-env @babel/preset-react
配置文件中配置 react
// 加载器的配置
module: {
rules: [
...
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env', // js 的新语法
'@babel/preset-react' // react 的语法
]
}
}
}
]
}在 src 文件夹中创建文件
src
App.jsx (根组件)
// react 的根组件
import React, {Component} from "react";
export default class App extends Component {
render() {
return (
<div>
<h1> 一节课不旷，一节课不听，主打的是就是陪伴 </h1>
<h2>你好世界</h2>
</div>
)
}
}main.js （入口文件）
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
console.log(App);
const root = ReactDOM.createRoot(document.getElementById('app'))
root.render(<App />)注意 index.html 文件中需要创建一个 div 且 id 要是 app
main.scss （全局样式文件）
热更新
安装 cnpm i webpack-dev-server
在 package.json 中的 scripts 选项中配置
"scripts": {
"start": "webpack-dev-server --config webpack.config.js", // 配置项目启动
"build": "webpack --config webpack.config.js" // 配置项目打包
}
执行 npm start 进行项目的运行，执行 npm build 进行打包
图片加载器
如果说想要在项目中使用 图片模块可以做以下配置
// 加载器的配置
module: {
rules: [
...
{
// 配置图片加载器
test: [/\.jpe?g$/, /\.png$/, /\.gif$/, /\.weeb$/],
type: 'asset', // 通用 资源类型
parser: {
dataUrlCondition: {
maxSize: 5 * 1024, // 5kb
}
}
}
]
}配置忽略后缀名
// 配置别名和忽略名
resolve: {
// 配置无需后缀名
extensions: ['.js','.ts','.jsx','.tsx','.vue']
}配置 @ 别名
// 配置别名和忽略名
resolve: {
// 配置无需后缀名
extensions: ['.js','.ts','.jsx','.tsx','.vue'],
// 配置 @ 为 src 路径
alias: {
'@': path.resolve(__dirname, './src')
}
}服务器代理解决跨域
// 配置服务器代理
devServer: {
port: 3000,
proxy: {
'/api': {
// 代理的地址
target: 'http://open.douyucdn.cn',
// 默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。
changeOrigin: true
}
},
}vue 配置
安装： cnpm i vue-loader@15 vue-template-compiler vue@2
导入插件：
// 导入 vue 的加载器 const VueLoader = require('vue-loader/lib/plugin')配置插件
// 配置插件的地方 plugins: [ // 配置 vue 插件 new VueLoader(), ... ],配置加载器
// 加载器的配置 module: { rules: [ ... , { test: /\.vue$/, use: ['vue-loader'] } ] },配置 vue 项目
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
