建设网站需要什么基础,为什么做网站要服务器 和域名,怎么打开到wordpress,合肥建设工会网站在开发中#xff0c;我们会使用 vue、react、less、scss等语法进行开发项目#xff0c;但是浏览器只能识别 js、css#xff0c;或者说在js中使用了es6中的import 导入 这时候也需要打包工具去转换成浏览器可以识别的语句。
一、使用webpack
1.初始化package.json
npm i…在开发中我们会使用 vue、react、less、scss等语法进行开发项目但是浏览器只能识别 js、css或者说在js中使用了es6中的import 导入 这时候也需要打包工具去转换成浏览器可以识别的语句。
一、使用webpack
1.初始化package.json
npm init -y
注意生成的package.json 中的name不要叫插件名称 否则下载不了。
2.下载依赖
npm i webpack webpack-cli -D 3. 启用webpack
开发模式
npx webpack ./src/main.js --modedevelopment
生产模式
npx webpack ./src/main.js --modeproduction
当然 你也需要新建一个 src/main.js的文件
npx webpack 是用来运行本地安装 Webpack 包的。
./src/main.js: 指定 Webpack 从 main.js 文件开始打包不但会打包 main.js还会将其依赖也一起打包进来。
--modexxx指定模式环境
4. 查看输出文件
默认输出到dist文件下。
二、基础配置
15大核心概念 1. entry入口指示 Webpack 从哪个文件开始打包 2. output输出指示 Webpack 打包完的文件输出到哪里去如何命名等 3. loader加载器webpack 本身只能处理 js、json 等资源其他资源需要借助 loaderWebpack 才能解析 4. plugins插件扩展 Webpack 的功能 5. mode模式主要由两种模式开发模式development、生产模式production 根目录新建 webpack.config.js
module.exports {// 入口entry: ,// 输出output: {},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: ,
}; 修改配置文件
// Node.js的核心模块专门用来处理文件路径
const path require(path);module.exports {// 入口// 相对路径和绝对路径都行entry: ./src/main.js,// 输出output: {// path: 文件输出目录必须是绝对路径// path.resolve()方法返回一个绝对路径// __dirname 当前文件的文件夹绝对路径path: path.resolve(__dirname, dist),// filename: 输出文件名filename: main.js,},// 加载器module: {rules: [],},// 插件plugins: [],// 模式mode: development, // 开发模式 生产模式production
};有了入口和模式的配置 直接运行 即可
npx webpack
2 处理样式资源 1. 处理css资源
因为我们是将css引入到入口文件里面一般情况下js是不能识别css 的所以我们要对css进行处理。
npm i css-loader style-loader -D
css-loader负责将 Css 文件编译成 Webpack 能识别的模块style-loader会动态创建一个 Style 标签里面放置 Webpack 中 Css 模块内容
此时样式就会以 Style 标签的形式在页面上生效
webpack.config.js module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [style-loader, css-loader],},],},
src/main.js
import ./css/index.css src/css/index.css
.box {width: 200px;height: 200px;background: skyblue;
} public/index.html
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
script src../dist/main.js/script
bodydiv classbox/div
/body
/html
注意 html 引入的是打包后的文件
npx webpack
2.处理less资源
npm i less-loader -D webpack.config.js
rules: [...{test: /\.less$/,use: [style-loader, css-loader, less-loader],},],
src/main.js
import ./css/index.css
import ./less/index.less 当然像scss/sass、Stylus 也是相同的配置方法 具体可参考webpack官网 3. 处理图片资源
新增两张图片
src/images/2kb.png
src/images/avatar.png
使用进行打包,会默认在dist目录下 生成一个带有hash的图片名称也并没有产生一个本地资源的目录如果需要则需另外配置。 因为有一张图片是2kb的每次访问都需要去进行请求资源我们可以把小于 xx 之内的图片进行转换base64处理。 // 加载器module: {rules: [{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},},],
这时候dist文件下 只会产生一个图片资源另一个已被处理成base64资源。 4.修改输出资源的名称和路径
当然我们希望打包后的js在一个文件中本地资源又在另一个文件中。 output: {path: path.resolve(__dirname, dist),filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中},// 加载器module: {rules: [{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},,},],
打包结果 5. 清空上次打包资源
若不做当前处理如果有相同会默认替换如有更新会自动新增不删除原来打包文件。 output: {path: path.resolve(__dirname, dist),filename: static/js/main.js,clean: true, // 自动将上次打包目录资源清空},
6. 处理字体图标
资源文件 可去iconfont-阿里巴巴矢量图标库进行下载 src/fonts/iconfont.ttf src/fonts/iconfont.woff src/fonts/iconfont.woff2 src/css/iconfont.css
import ./css/index.css
import ./less/index.lessimport ./css/iconfont.css module: {rules: [{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},]
} type: asset/resource和type: asset的区别
type: asset/resource 相当于file-loader, 将文件转化成 Webpack 能识别的资源其他不做处理type: asset 相当于url-loader, 将文件转化成 Webpack 能识别的资源同时小于某个大小的资源会处理成 data URI 形式如果还有其他文件类型需要处理 可以在test正则中继续添加 |mp3|mp4|avi
7. eslint配置
eslint 就是检测我们各种语法规范的让不规范的代码进行提示
根目录新建 .eslintrc.js
module.exports {// 解析选项parserOptions: {},// 具体检查规则rules: {},// 继承其他规则extends: [],// ...// 其他规则详见https://eslint.bootcss.com/docs/user-guide/configuring
}; 1. parserOptions 解析选项
parserOptions: {ecmaVersion: 6, // ES 语法版本sourceType: module, // ES 模块化ecmaFeatures: { // ES 其他特性jsx: true // 如果是 React 项目就需要开启 jsx 语法}
}
2. rules 具体规则
off 或 0 - 关闭规则warn 或 1 - 开启规则使用警告级别的错误warn (不会导致程序退出)error 或 2 - 开启规则使用错误级别的错误error (当被触发的时候程序会退出)
rules: {semi: error, // 禁止使用分号array-callback-return: warn, // 强制数组方法的回调函数中有 return 语句否则警告default-case: [warn, // 要求 switch 语句中有 default 分支否则警告{ commentPattern: ^no default$ } // 允许在最后注释 no default, 就不会有警告了],eqeqeq: [warn, // 强制使用 和 !否则警告smart // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告],
}
3. extends 继承
开发中一点点写 rules 规则太费劲了所以有更好的办法继承现有的规则。
现有以下较为有名的规则
// 例如在React项目中我们可以这样写配置
module.exports {extends: [react-app],rules: {// 我们的规则会覆盖掉react-app的规则// 所以想要修改规则直接改就是了eqeqeq: [warn, smart],},
};
在webpack中使用
npm i eslint-webpack-plugin eslint -D
.eslintrc.js
module.exports {// 继承 Eslint 规则extends: [eslint:recommended],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6,sourceType: module,},rules: {no-var: 2, // 不能使用 var 定义变量},}; webpack.config.js
const ESLintWebpackPlugin require(eslint-webpack-plugin);module.exports {plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),}),],
}
这时候如果你在编辑器中安装了eslint插件 在src目录下写一个带有var声明变量的代码就会提示如果没下载则打包编译时会有报错提示。
8. 忽略eslint文件检查
在上面我们值配置了src目录下但是装在编译器的eslint插件并不知道所以他也是全局进行检查例如我们打包生成后的文件就会标红所以过滤掉dist目录。 根目录新建.eslintignore
# 忽略dist目录下所有文件
dist
9.Babel
npm i babel-loader babel/core babel/preset-env -D
定义 Babel 配置文件 module: {{test: /\.js$/,// 排斥哪些文件exclude: /node_modules/,loader: babel-loader,options: {presets: [babel/preset-env]}}],}, 当然如果配置项够多也可以提取options
babel.config.js
module.exports {// 智能预设presets: [babel/preset-env]
} 10.处理 Html 资源
html为什么需要打包呢本身不就html吗
这个html 是打包后的html 并且呢 他会引入打包后的js资源内容也是和源文件一样的。
npm i html-webpack-plugin -D
webpack.config.js plugins: [new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, public/index.html),}),],
若new HtmlWebpackPlugin 中不写指定文件则只会引入js文件 不会生成相同的dom元素
11. 服务器自动化webpack-dev-server
每次都需要手动去刷新文件才去自动更新 webpack-dev-server就可以在本地服务器开启一个端口号进行自动化更新
npm i webpack-dev-server -D module.exports {
// 开发服务器devServer: {host: localhost, // 启动服务器域名port: 3000, // 启动服务器端口号open: true, // 是否自动打开浏览器}
}
npx webpack serve
当然也可以配置package.json使用npm run 运行 scripts: {dev: webpack server,build: webpack,},
就可以使用
npm run dev
npm run build
12.Css 优化处理
提取 Css 成单独文件
Css 文件目前被打包到 js 文件中当 js 文件加载时会创建一个 style 标签来生成样式
这样对于网站来说会出现闪屏现象用户体验不好
我们应该是单独的 Css 文件通过 link 标签加载性能才好
npm i mini-css-extract-plugin -D
webpack.config.js
将之前在module rules配置的 所有样式的style-loader 改成MiniCssExtractPlugin.loader
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, css-loader],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, css-loader, less-loader],},]}
}
13.css兼容性处理
例如在一些网站中使用-webkit- 等其他前缀对浏览器进行兼容。下面插件就是对css样式自动配置
npm i postcss-loader postcss postcss-preset-env -D
放到css-loader下面 {loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},}, // 插件plugins: [// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),], 当然 如果过多可以封装成函数进行return 返回出去基本上在开发中也不会引入多个css样式处理语言。
我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。
{// 其他省略browserslist: [ie 8]
}实际开发中我们一般不考虑旧版本浏览器了所以我们可以这样设置
{// 其他省略browserslist: [last 2 version, 1%, not dead]
}
14. 压缩css npm install css-minimizer-webpack-plugin --save-dev
webpack.config.js
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);module.exports {// 插件plugins: [// css压缩new CssMinimizerPlugin(),],
}
css 会从多行变成一行对于js和html 不需要进行压缩对于生产环境下会自动压缩成一行。
15.HotModuleReplacement
在修改某个文件进行打包时并不希望他是全部更新的我修改了哪些就应该更新哪些文件
module.exports {//...devServer: {hot: true,},
};
此时 css 样式经过 style-loader 处理已经具备 HMR 功能了。 但是 js 还不行。
JS 配置需要在main.js 入口文件中
// 判断是否支持HMR功能
if (module.hot) {module.hot.accept(./js/one.js);// 第二个参数额外执行的事件module.hot.accept(./js/sum.js, function (sum) {const result2 sum(1, 2, 3, 4);console.log(result2);});
}
在开发中各种框架的loader已经配置好了。
16.OneOf
打包时每个文件都会经过所有 loader 处理虽然因为 test 正则原因实际没有处理上但是都要过一遍。比较慢。如果匹配上一个就不需要再次匹配了。
在rules新增 { oneOf:[ ] }
module: {rules: [{ //新增对象oneOf[{},{...一堆loader}]}]
}
17.Cache
每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译速度比较慢。我们可以缓存之前的 Eslint 检查 和 Babel 编译结果这样第二次打包时速度就会更快了。 module: {rules: [ {test: /\.js$/,// 排斥哪些文件exclude: /node_modules/,loader: babel-loader,options: {presets: [babel/preset-env],cacheDirectory: true, // 开启babel编译缓存cacheCompression: false, // 缓存文件不要压缩}}]
}plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, src),exclude: node_modules, // 默认值cache: true, // 开启缓存// 缓存目录cacheLocation: path.resolve( __dirname,./node_modules/.cache/.eslintcache ),})
]
18.图片压缩
npm i image-minimizer-webpack-plugin imagemin -D 无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
有损压缩
npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
webpack.config.js
const ImageMinimizerPlugin require(image-minimizer-webpack-plugin);module.export {
optimization: {minimizer: [// 压缩图片new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [[gifsicle, { interlaced: true }],[jpegtran, { progressive: true }],[optipng, { optimizationLevel: 5 }],[svgo,{plugins: [preset-default,prefixIds,{name: sortAttrs,params: {xmlnsOrder: alphabetical,},},],},],],},},}),]},
}
只有在生产模式下打包是生效的。当批量图片压缩是比较方便也可以手动找网站进行压缩。
当然webpack配置还有很多 可自行参考webpack官网。
