前端工程化
一、模块化
1.1 服务器端模块化规范
CommonJS
- 模块分为单文件模块与包
- 模块成员导出：module.exports和exports
- 模块成员导入：require (‘模块标识符’)
例：
a.js
let a = 10
let b = 20
module.exports = {
a,b
}
b.js
const a = require('./a.js')
console.log(a)
1.2 ES6模块化
ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，那如何把每个模块联系起来呢？
核心点就是模块的导入（import）与导出（export）。
1.2.1 module.exports
如上代码 我们把它改造成ES6格式
let a = 10
let b = 20
export default {
a,b
}
b.js
import a from './a.js'
console.log(a)
注意
- 浏览器默认不支持ES6的import 我们需要使用npm init -y命令初始化
- 在package.json文件中新增配置 “type”: “module” 即可
1.2.2 按需导入导出(export)
a.js
export let a = 10
b.js
import {
a} from './a.js'
console.log(a)
1.2.3 直接执行模块代码
a.js
for (let i = 0; i < 5; i++) {
console.log(i)
}
b.js
import './a.js'
1.2.4 总结
- 只有在使用export default的时候 b.js中的变量名称可以随便起
- 如果直接使用export导出的时候 b.js中的变量必须与a.js导出变量一样 并且需要加{}
- 在浏览器中使用 需要给script标签设置 type=“module”
二、webpack
2.1 安装与配置webpack
2.1.1 安装webpack
npm install webpack webpack-cli --save-dev- 可简写为：
npm install webpack webpack-cli -D - dev 代表开发环境 save 代表生产环境
2.1.2 配置webpack
在当前目录下创建一个webpack.config.js文件
module.exports={
mode:'development' //开发模式
mode:'production' // 生产模式
}
然后在packpage.json中的scripts中写入
"dev":"webpack"
最后在终端中运行命令
npm run dev
2.2 打包出口和出口文件
默认打包src目录下的index.js
入口文件
就是项目或程序被请求的时候，第一个被访问到的文件，此文件再找相对应的模块进行处理
在当前项目中，index.html 是入口文件，因为我们请求的就是 index.html
但是对于 webpack 来说，打包的入口文件是 index.js，因为 index.js 中引入了其他程序需要的模块，并编写了相应的逻辑代码
出口文件
打包之后的文件目录以及名称
webpack 有一些默认配置
webpack.config.js
const path = require('path')
module.exports = {
// mode:'development'
mode: 'production',
entry: path.resolve(__dirname, 'src/app.js'), // 入口文件
output: {
path: path.resolve(__dirname, 'dist'), //出口文件
filename: 'bundle.js' // 打包后文件名
}
}
- 建议输出文件名称使用 bundle.js，而且注意修改 index.html 中的引入文件为 bundle.js
2.3 自动打包
使用 webpack-dev-server
webpack-dev-server为你提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能。
安装：
npm install --save-dev webpack-dev-server
修改package.json中的启动命令
"dev":"webpack serve"
之后运行
npm run dev
注意：
- 利用webpack-dev-serve 进行打包后 地址为
localhost:8080 - 打包后webpack-dev-serve 不会写入到任何输出文件 而是储存在内存当中
2.4 生成预览页面
当前存在的问题：localhost:8080 对应的是网站跟目录，index.html 在 src 目录下，访问起来比较麻烦
解决方案：可以将 src 目录下的 index.html 拷贝一份到根目录下，这样访问 localhost:8080 时，就会默认渲染 index.html
但是如果修改完 index.html 后还需要手动拷贝比较麻烦，可以使用插件：
HtmlWebpackPlugin
安装：
npm install --save-dev html-webpack-plugin
然后我们需要在webpack.config.js中 引入
const HtmlWebpackPlugin = require('html-webpack-plugin');
同时我们需要安装
npm i loader-utils -D
配置HtmlWebpackPlugin
const htmlPlugins = new HtmlWebpackPlugin({
template:'./src/index.html', //要拷贝的文件
filename:'index.html' // 拷贝到哪里
})
plugins: [htmlPlugins]
之后逆行 npm run dev即可
但是根目录下并没有index.html 因为依然创建在内存中
2.5 总结
webpack-dev-serve:
- 会开启一个服务 地址是localhost:8080 默认会对应项目的根目录
- 当修改代码后 会自动的重新打包 并在内存中生成一个bundle.js文件 而不会覆盖dist目录下的bundle.js
- 访问bundle.js的路径为localhost:8080/bundle.js
html-webpacl-plugin:
- 根据配置 将指定路径下的html文件自动拷贝到指定目录下(例如 根目录)
- 只要每次运行打包命令 就会进行拷贝
- 也一样存在于内存中
2.6 加载器
webpack 默认只能打包 .js 模文件，其他静态文件，如 .css，图片等默认不能处理，如果不加载对应的加载器，则会报错
webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。
2.6.1 处理css文件
安装加载器
npm install --save-dev css-loader style-loader
配置 webpack.config.js
module:{
rules:[
{
test:/\.css$/,use:['style-loader','css-loader']}
]
}
loader 的调用是从后往前掉
2.6.2处理less文件
安装
npm install less-loader less -D
配置
{
test:/\.less$/,use:['style-loader','css-loader','less-loader']}
之后重新打包即可
2.6.3 处理图片和文字
安装
npm i file-loader url-loader -D
配置
{
test: /\.png$/,
use: [{
loader: 'url-loader', //使用url-loader处理打包图片
options:{
limit:10750
}
}]
}
- 图片大小如果小于limit值 作为base64位码引入并打包
- 反之不会打包 而是作为资源引用
2.6.4 处理高级JS语法
安装
npm install -D babel-loader @babel/core @babel/preset-env
webpack.config.js 中添加如下规则
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除作用 node_modules下不要处理
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], //处理方式
}
}
}
在index.js中写入
class Person{
static age = 10
}
console.log(Person.age)
完成后我们执行打包命令 npm run dev
之后我们发现会报错 错误原因在于没有安装babel语法的相关插件
安装：
npm i -D @babel/plugin-proposal-class-properties
然后在上面规则的 option 属性中添加配置
plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
转载：https://blog.csdn.net/Web_chicken/article/details/114593272