一、项目初始化
初始化webpack框架可以直接通过命令行工具wepack init（注意配置node和npm的环境变量）进行创建，这里主要是说明相关配置的关系和作用
既然是初始化，我们首先解决的是能够打包出前端产物，html和css暂时不进行处理，直接对js相关的编译打包进行处理
这里处理的问题
- 配置webpack的入口和出口
- js打包的babel基础配置
- 如何将js导入到html中
- 本地开发环境的配置
1、初始化package.json
npm init -y2、安装webpack
npm i webpack webpack-cli babel-loader @babel/preset-env @babel/core -D3、新建并配置webpack.config.js
首先要配置出口和入口，这样我们就可以直接用webpack进行基础的打包操作，
后面再一步一步去丰富功能，我们一起往下看
我们先实现两个内容，就是js的编译打包，并且引入到html中，直接通过浏览器访问
基础配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
/**
* entry 入口文件路径，还有更多配置方法，后面介绍
* output 打包产物保存路径 打包的文件名称 bundle.js
* plugin 帮助webpack完成loader工具 功能丰富 先配置html模板可以引入打包的js文件
*/
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
// 指定模板文件路径 从入口打包生成的js文件会直接通过script标签引入的html
template: './public/index.html'
})
]
};
4、根据配置创建入口文件
创建src和public目录
分别创建src/index.js和public/index.html文件
如果是类库可以不配置public/index.html文件，不过也可以另外配置作为前台展示和调试用
index.js
window.onload = () => {
document.getElementById('app').innerText = 'Hello World'
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>5、配置package.json的script命令和本地开发环境
build命令，直接执行webpack进行打包，mode为production生产模式，会对应使用相应的webpack默认配置，也可以直接在webpack.config.js配置mode字段的值来实现
而本地开发环境dev/serve命令配置需要配合webpack-dev-server使用，所以先安装
npm i webpack-dev-server -D在package.json中配置scripts的build打包和dev本地开发命令
{
"scripts": {
"build": "webpack --mode=production",
"dev": "webpack server"
},
}其中webpack server为webpack内置的命令，可以直接通过webpack-dev-server启动本地服务器，同时需要在webpack.config.js中增加配置
module.exports = {
+ devServer: {
+ open: true,
+ host: 'localhost',
+ },
}
6、新建并配置babel.config.js
Babel 是一个 JavaScript 编译器，babel.config.js 文件用于 Babel 相关的preset、plugin配置，后面我们跟着内容介绍，
这里做的是@babel/preset-env的环境配置，它允许你根据目标环境（浏览器类型版本、node版本等）的特性自动到目标Javasvript版本
{
"presets" : [
["@babel/preset-env",{
"targets": {
"browsers": [
"last 2 versions",
"not ie <= 9"
]
}
}]
]
}
// or 基础配置
{
"presets" : [
"@babel/preset-env"
]
}
完成上面的工作内容，执行npm run build就可以获得打包产物，在浏览器中打开生成的html文件就可以获得看到页面展示 Hello World！
在实际的应用中，还缺少很多内容，
- 如何创建css/less/sass文件并引用到项目中生效
- 如何配置使用typescript
- 如何使用vue/react框架
- 如何进行优化配置
- 等等...
后面我们一一处理
二、框架工具等基础配置
- 首先解决单样式文件***.css/less的使用问题问题；
- 在大型项目中为了获得良好的代码api提醒和类型约束的体验，添加上typescript；
- 最后处理一下接入流行的前端框架进行实际项目开发的问题
1、声明less文件并配置loader
webpack对于文件的处理，
大多会依赖loader对对应的文件类型的内容进行编译转码处理，less也不例外，对应的是less-loader
除了编译以外，还需要将编译的内容导出到指定文件并引入到html中，对应的是mini-css-extract-plugin，
另外针对css的can i use问题，postcss可以对css的样式进行适配不同浏览器添加前缀的处理，另外还可以进行模块化等处理，
MiniCssExtractPlugin | webpack 中文文档将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。（需要配合css-loader和webpack5⬆使用）
// mini-css-extract-plugin 帮助我们提取样式文件，并导入到html文件中
npm i less-loader mini-css-extract-plugin css-loader -D同时也可以支持css文件的处理，另外引入PostCSS 中文文档 | PostCSS中文网，postcss是一个用 JavaScript 工具和插件转换 CSS 代码的工具，通过配置API、插件的形式处理css样式文件，
postcss插件
eg：增加autoprefixer插件配置，自动填充css样式在不同浏览器的前缀适配
npm i postcss postcss-loader autoprefixer -D新建postcss.config.js文件
module.exports = {
plugins: [["autoprefixer"]],
};
增加webpack.config.js配置
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.less$/,
+ use: [MiniCssExtractPlugin.loader, 'postcss-loader', 'css-loader', 'less-loader']
+ },
+ {
+ test: /\.css$/,
+ use: [MiniCssExtractPlugin.loader, 'postcss-loader', 'css-loader']
+ }
+ ]
+ },
plugins: [
+ new MiniCssExtractPlugin({
+ filename:'style.css' // 指定输出的 CSS 文件名
+ })
]
};
2、增加typescript配置
由于JavaScript的弱类型特性，在大型项目中，针对不同的api的开发和使用，容易出现不确定性的问题，并且在调用的时候如果没有api接口的提示，在不熟悉的情况下影响开发效率，增加维护成本，
强类型和类型约束的TypeScript针对性的解决了这些问题，在大型项目中使用TypeScript也是非常合适的
其使用依赖于 typescript 和 ts-loader,，同时需要声明tsconfig.json文件
TypeScript 中文手册 - TypeScript 中文手册Typepscript作为JavaScript的超集，通过类型约束
npm i typescript ts-loader -D创建tsconfig.json文件进行ts相关配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/*.ts",
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
3、引入并使用vue
针对vue的处理，
首先要通过 vue-loader处理.vue文件
另外需要处理.vue的单文件需要使用@vue/compiler-sfc
由于前面配置了TypeScript，所以在使用需要引入@types/vue，编译工作依赖@vue/runtime-core，@vue/runtime-dom
npm i vue-loader @vue/compiler-sfc @vue/runtime-core @vue/runtime-dom @types/vue -D
npm i vue在wepack.config.js中增加loader配置，注意在resolve.extension数组中增加 '.vue'方便引入，
+ const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ use: 'vue-loader'
+ }
+ ]
+ },
plugins: [
+ new VueLoaderPlugin()
]
};
开始声明vue应用的入口和代码文件
src/index.ts注册app
import { createApp } from 'vue'
import App from "./index.vue" //如果没有配置@可以配置一下 或者换成绝对路径
const app = createApp(App)
app.mount('#app')src/index.vue
<template>
<div>
这是一个vue应用开发者是<span>{{ name }}</span>
</div>
</template>
<script lang="ts" setup>
const name = '张ceshi三'
</script>
<style lang="less">
span {
color: red;
}
</style>三、验证以及后续计划
1、开发环境
项目目录根路径执行
npm run dev打开会发现出现引用index.vue类型声明的报错，我们需要在src目录下新建shmi.d.vue文件，文件的主要作用是声明 Vue 文件的模块类型，使得 TypeScript 能够正确地处理 .vue 文件，并且不再报错。
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}之后就可以在打开的浏览器中看到效果
2、打包产物
接下来我们看一下打包产物是否符合预期，执行
npm run build打包成功产物
直接在浏览器中打开index.html
3、后续优化
在实际开发中的环境配置，应用配置等
分包优化等操作
gzip，内联图片等
扫一扫
52
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
