前端工程化

1.模块化相关规范

1.1浏览器端模块化规范

名称	文件
AMD	Require.js
CMD	Sea.js

1.2 服务器端模块规范

common.js

1.3 大一统的模块化规范(ES6)

定义：

每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字

1.4 webpack工程化

(1)创建文件、进行打包

//创建空项目
npm init -y//创建项目文件开发目录
mkdir src//npm导入jquery文件
npm install jquery -S//开发项目后要进行webpack打包
npm install webpack webpack-cli -D
//在根目录下创建webpack.config.js文件，里面写入
module.exports = {mode: "development", //development开发 production发布
};
//在package.json文件中找到scripts,写入"dev":"webpack"
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev":"webpack"},
//使用命令进行打包
npm run dev

运行得到：

D:\JCWeb\JCTest\Vue\webpack\first>npm run dev> first@1.0.0 dev D:\JCWeb\JCTest\Vue\webpack\first
> webpackHash: e8db307546f4032061d5
Version: webpack 4.43.0
Time: 435ms
Built at: 2020-05-31 21:26:08Asset     Size  Chunks             Chunk Names
main.js  322 KiB    main  [emitted]  main
Entrypoint main = main.js
[./src/index.js] 138 bytes {main} [built]+ 1 hidden module

会在根目录下生成一个dist的打包文件

(2)配置打包的入口和出口

webpack.config.js

// 导入node中的path模块
const path = require("path")module.exports = {// 编译模式mode: "development", //development productionentry: path.join(__dirname,"./src/index.js"),//待打包文件output: {path: path.join(__dirname,"./dist"),//输出文件的存放路径filename: "bundle.js"//输出文件的名称}
};

(3)配置webpack的自动打包功能

//安装自动打包工具
npm install webpack-dev-server -D//修改package.json下的dev命令
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev":"webpack-dev-server"//script节点下的脚本，可以通过npm run运行
},//将src中index.html的script脚本引用路径改为"/buldle.js"
<script src="../dist/bundle.js"></script>//运行重新打包
npm run dev

运行成功：

D:\JCWeb\JCTest\Vue\webpack\first>npm run dev> first@1.0.0 dev D:\JCWeb\JCTest\Vue\webpack\first
> webpack-dev-serveri ｢wds｣: Project is running at http://localhost:8081/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\JCWeb\JCTest\Vue\webpack\first
i ｢wdm｣: Hash: f5436783083a9d330607
Version: webpack 4.43.0
Time: 617ms
Built at: 2020-05-31 21:51:11Asset     Size  Chunks             Chunk Names
bundle.js  680 KiB    main  [emitted]  main
Entrypoint main = bundle.js

会生成一个实时服务器，会自动根据文件更改进行更新。

(4)配置html-webpack-plugin生成预览页面

安装预览页面的插件

npm install html-webpack-plugin -D

修改webpack.config.js文件的头部区域，添加如下配置信息

// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({template:"./src/index.html",//指定要用到的模板文件filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})

修改webpack.config.js文件向外暴露的配置文件，新增节点

module.exports = {// 编译模式mode: "development", //development productionentry: path.join(__dirname,"./src/index.js"),output: {path: path.join(__dirname,"./dist"),//输出文件的存放路径filename: "bundle.js"//输出文件的名称},plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表
};

此时完整文件是：

// 导入node中的path模块
const path = require("path")
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({template:"./src/index.html",//指定要用到的模板文件filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})module.exports = {// 编译模式mode: "development", //development productionentry: path.join(__dirname,"./src/index.js"),output: {path: path.join(__dirname,"./dist"),//输出文件的存放路径filename: "bundle.js"//输出文件的名称},plugins:[htmlPlugin]//plugins数组是webpack打包期间会用到的一些插件列表
};

错误解决：

cnpm install webpack webpack-dev-server webpack-cli --save-dev

(5)配置自动打包的相关参数

//在package.json中修改dev
"dev": "webpack-dev-server --open --host 127.0.0.1 --post 8080"

运行便会自动进入服务器

1.5 webpack中的加载器

loader加载器，协助webpack进行打包

安装处理css文件的loader

npm i style-loader css-loader -D

在webpack.config.js的module->rules数组中，添加loader规则

module:{rules:[// test表示匹配的文件类型，use表示对应要调用的loader// use数组中的指定的loader顺序是固定的// 多个loader的调用顺序是：从后往前进行调用{ test:/\.css$/,use:["style-loader","css-loder"] }]}

最新代码:

// 导入node中的path模块
const path = require("path")
// 导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({template:"./src/index.html",//指定要用到的模板文件filename:"index.html"//指定生成的文件名称，该文件存在于内存中，在目录中不显示
})module.exports = {// 编译模式mode: "development", //development productionentry: path.join(__dirname,"./src/index.js"),output: {path: path.join(__dirname,"./dist"),//输出文件的存放路径filename: "bundle.js"//输出文件的名称},plugins:[htmlPlugin],//plugins数组是webpack打包期间会用到的一些插件列表module:{rules:[// test表示匹配的文件类型，use表示对应要调用的loader// use数组中的指定的loader顺序是固定的// 多个loader的调用顺序是：从后往前进行调用{ test:/\.css$/,use:["style-loader","css-loader"] }]}
};

配置postCSS自动添加css的兼容前缀

安装相关插件

npm i postcss-loader autoprefixer -D

在项目根目录中创建postcss的配置文件postcss.config.js，并初始化如下配置：

const autoprefixer = require("autoprefixer");//导入自动添加前缀的插件module.exports = {plugins: [autoprefixer],
};

在webpack.config.js的module->rules数组中，修改css的loader规则

{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] },

配置less-loader加载器

安装处理less文件的loader加载器
```
npm i style-loader less-loader -D
```
在webpack.config.js的module->rules数组中，添加loader规则
```
 { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] }
```
配置sass-loader加载器

安装处理sass文件的loader加载器
```
npm i sass-loader node-sass -D
```
在webpack.config.js的module->rules数组中，添加loader规则
```
{ test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
```
打包样式表的图片和文字

安装相关插件包
```
npm i url-loader file-loader -D
```
在webpack.config.js的module->rules数组中，添加loader规则
```
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: "url-loader?limit=16920"
},
```
其中?后面接的是loader的参数项，limit用来指定图片的大小，字节为byte。

打包处理js文件中的高级语法

安装babel转换器相关的包

npm i babel-loader @babel/core @babel/runtime -D

安装babel语法插件相关的包

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在根目录中，创建babel配置文件babel.config.js并初始化基本配置如下

module.exports = {presets: ["@babel/preset-env"],plugins: ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties",],
};

在webpack.config.js的module->rules数组中，添加loader规则

{ test: /\.js$/, use: "babel-loader", exclude: /node_modules/}

1.6 vue单文件模块化开发

1.6.1创建vue单文件

<template><div id="box"></div>
</template>
<script>// 这里是用来处理vue组件的业务逻辑的export default {data(){return{//私有数据}},methods:{//处理函数}}
</script><style lang="less" scoped>
// scoped防止样式冲突
#box{background-color: red;
}
</style>

1.6.2在webpack中配置vue组件的加载器

安装配置插件文件

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

在webpack.config.js配置文件中，添加vue-loader的配置项如下：

// 引入vue加载器插件
const VueLoaderPlugin = require("vue-loader/lib/plugin"){ test: /\.vue$/, loader: "vue-loader" },plugins: [// 插件new VueLoaderPlugin(),//请确保引入了此插件
],

1.6.3在webpack项目中使用vue

安装相关插件

npm i vue -S

在index.js文件中配置

// 导入vue构造函数
import Vue from "vue"// 导入App根组件
import App from "./components/App.vue"const vm = new Vue({// 指定vm实例要控制的页面区域el:"#app",// 通过render函数，把指定的组件渲染到el区域中render:h=>h(App)
})

1.7 webpack打包发布

在package.json中配置：

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --host 127.0.0.1 --post 8080",//用于打包的命令"build":"webpack -p"},

运行：

npm run build

江在川上曰：webpack前端工程化相关推荐

江在川上曰：js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化 JSON解析和序列化 JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据.他只是一种数据格式,并非一种编程语 ...
江在川上曰：云服务器上的flask项目部署(Ubuntu+Flask+Gunicorn+Supervisor+Nginx+Anaconda)
云服务器上的flask项目部署(anaconda.python.flask等相关安装) 在探索未知的路上走了很多弯路,这里记载了我在阿里云上部署项目切实可行的步骤,当然问题因人而异,没有四海皆适用的准 ...
江在川上曰：JS函数
函数函数的定义方式自定义函数(命名函数) 函数表达式(匿名函数) 利用 new Function("参数1","参数2","函数体") ...
江在川上曰：less样式预编译
less样式预编译 1.css原生变量定义使用"–"进行变量定义使用var()进行变量的引用 --bgColor:red; background:var(--bgColor); ...
江在川上曰：vue中使用swiper
vue中使用swiper 1 安装 //这是swiper组件 npm install vue-awesome-swiper --save-dev //这是swiper组件的依赖包 npm instal ...
关于Webpack前端工程化构建，你必须要掌握这些核心知识点
引言在很久之前,模块化管理还没有出现,如果我们开发一个页面想要引入一些依赖的话,最常见的做法就是将依赖文件引入到.html文件中.比如,我们要使用JS的一些依赖库,就要在.html文件中使用< ...
[上海线下活动] Web前端工程化架构实践 -- 沪江技术沙龙
报名链接:www.huodongxing.com/event/53996- Web前端工程化历经了:2011年的Shell&(YUICompress || Google Closure Com ...
透视前端工程化之 Webpack 基本介绍【文末有彩蛋～】
1 Webpack 的特点图片来源于网络 Webpack 是一款强大的打包工具.在 Webpack 中一切皆模块.Webpack 官网的 Banner 图完美地诠释了这一理念.Webpack 从一个 ...
【webpack】前端工程化与webpack
一.什么是前端工程化? 在现阶段的开发工作中,前端开发遵循4个现代化模块化(js 的模块化.css 的模块化.其它资源的模块化) 组件化(复用现有的 UI 结构.样式.行为) 规范化(目录结构的划分 ...

江在川上曰：webpack前端工程化