怎么做百度自己的网站空间,东莞哪些地方是风险区,爱网盘,采集做网站常用 loader
loader 是辅助打包工具。webpack 默认只能打包 js 文件#xff0c;打包其它模块就需要配置 loader 来告诉 webpack 该怎么去打包其它文件。loader 可以将文件从不同的语言转换为 JavaScript。一类文件如果需要多个 loader 处理#xff0c;loader 的执行顺序是从…常用 loader
loader 是辅助打包工具。webpack 默认只能打包 js 文件打包其它模块就需要配置 loader 来告诉 webpack 该怎么去打包其它文件。loader 可以将文件从不同的语言转换为 JavaScript。一类文件如果需要多个 loader 处理loader 的执行顺序是从后往前。
打包样式文件
打包 css
css 文件需要先用 css-loader 处理再用 style-loader 插入 style/style标签中。
安装 css-loader、style-loader
yarn add css-loader style-loader --savemodule.exports {module: {rules: [{test: /\.css$/,use: [// 再用 style-loader 创建 style 标签插入 head/head 标签中style-loader,// css 文件需要先用 css-loader 处理将 css 编译成 commonjs 整合到 js 中css-loader]}]}
};// 使用 localIdentName 自定义生成的样式名称格式可选的参数有
// [path] 表示样式表相对于项目根目录所在路径
// [name] 表示样式表文件名称
// [local] 表示样式的类名定义名称
// [hash:length] 表示32位的hash值 module.exports {module: {rules: [{test: /\.css$/,use: [style-loader,{loader: css-loader,options: {modules: {localIdentName: [path][name]-[local]}}}]}]}
};// index.js
import add from utils/add;
import ./css/style.css;// import styles from ./css/style.css;
// console.log(styles);console.log(add(1, 4));!-- index.html --
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1 classtitlehello webpack5/h1
/body
/html样式兼容性处理
postcss-loader 自动添加浏览器前缀。
使用 autofixer 插件辅助
autoprefixer 可以指定需要兼容的浏览器。
安装 postcss-loader、autofixer
yarn add postcss-loader autoprefixer --save// 通过配置加载指定的 css 兼容性样式
// postcss-loader 在 css-loader 之前调用
module.exports {module: {rules: [{test: /\.scss$/,use: [style-loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [[autoprefixer, {// options// 直接在这里指定浏览器版本overrideBrowsersList: [last 5 versions]}]]}}},sass-loader]}]}
};使用 postcss-preset-env 插件辅助
postcss-preset-env 插件可以指定需要添加的浏览器。
安装 postcss-loader、postcss-preset-env
yarn add postcss-loader postcss-prest-env --save// 通过配置加载指定的css兼容性样式
module.exports {module: {rules: [{test: /\.scss$/,use: [style-loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [[postcss-preset-env,{// Optionsbrowserslist: {development: [// 兼容最近的一个 chrome 的版本last 1 chrome version,last 1 firefox version,last 1 safari version,],production: [// 大于 99.8% 的浏览器0.2%,// 不要已经死了的浏览器比如 IE10兼容没有意义not dead,// op_mini 的浏览器全都死亡了not op_mini all]}},]]}}},sass-loader]},{test: /\.scss$/,use: [style-loader,css-loader,{loader: postcss-loader,// 写法二options: {ident: postcss,plugins: [require(postcss-preset-env)()]}},sass-loader]}]}
};打包 less
安装 less、less-loader、css-loader、style-loader
yarn add less less-loader css-loader style-loader --savemodule.exports {module: {rules: [// less-loader 是基于 less 的所以使用 less-loader 需要同时安装 less{test: /\.less$/,use: [style-loader,css-loader,less-loader]}]}
};
打包 sass
安装 sass、sass-loader、css-loader、style-loader
yarn add sass sass-loader css-loader style-loader --savemodule.exports {module: {rules: [// sass-loader 是基于 sass 的所以使用 sass-loader 需要同时安装 sass{test: /\.scss$/,use: [style-loader,css-loader,postcss-loader,sass-loader]}]}
};打包 styl
安装 stylus-loader、style-loader、css-loader
yarn add stylus-loader css-loader style-loadermodule.exports {module: {rules: [{test: /\.scss$/,use: [style-loader,css-loader,postcss-loader,stylus-loader]}]}
};打包图片、字体等静态资源
打包图片
webpack4 需要使用url-loader和file-loaderwebpack5 已内置使用模块 asset。
asset/resource
使用 asset/resource 处理的资源会输出到目录中采用哈希命名file-loader 在 webpack5 中已被 asset/resource 替代。
module.exports {module: {rules: [{test: /\.(png|jpeg|gif|PNG)$/,type: asset/resource}]}
};const path require(path);module.exports {output: {// ...// 指定所有 assetModule 文件的输出目录同时重命名输出的文件名称// assetModuleFilename: static/[hash][ext][query]},module: {rules: [{test: /\.(png|jpg|jpeg|gif|PNG)$/,type: asset/resource,generator: {// 与 assetModuleFilename 只取其一// 输出图片的名称filename: images/[hash:8][ext][query]}}]},
};asset/inline
url-loader 在 webpack5 中已被 asset/inline 替换。打包输出的数据 URI 使用 Base64 算法编码的文件内容可以减少 http 请求数量但是体积会变大
module.exports {module: {rules: [{test: /\.(png|jpg|jpeg|gif|PNG)$/,type: asset/inline}]}
};asset
module.exports {module: {output: {// ...// 指定 assetModule 文件的输出目录同时重命名输出的文件名称// assetModuleFilename: images/[hash:8][ext][query]},rules: [{test: /\.(png|jpeg|gif|PNG)$/,type: asset,parser: {// 自定义转 base64 的界限dataUrlCondition: {// 小于 10kb 的图片转 base64maxSize: 10 * 1024 // 10kb}},generator: {// 跟 assetModuleFilename 之中选一个即可// 输出图片的名称filename: images/[hash:8][ext][query]}}]}
};打包字体图标资源
module.exports {module: {output: {// ...// 指定图片文件的输出目录同时重命名输出的文件名称// assetModuleFilename: fonts/[hash:8][ext][query]},rules: [{test: /\.(ttf|otf|woff2?)$/,type: asset,generator: {// 跟 assetModuleFilename 之中选一个即可// 输出文件的名称filename: fonts/[hash:8][ext][query]}}]}
};打包其他资源
module.exports {module: {output: {// ...// 指定图片文件的输出目录同时重命名输出的文件名称// assetModuleFilename: media/[hash:8][ext][query]},rules: [{test: /\.(mp3|mp4|avi|excel)$/,type: asset,generator: {// 跟 assetModuleFilename 之中选一个即可// 输出文件的名称filename: media/[hash:8][ext][query]}}]}
};js 兼容性处理
因为不是所有浏览器都能识别 es6 语法所以需要通过 babel 进行转换将 es6 语法转换成所有浏览器都可以识别的 es5 语法。
使用最新版本 babel
最新版本 babel 已支持转换 generator 函数以及最新的 es6 语法。
安装 babel-loader、babel/core、babel/preset-env
yarn add babel-loader babel/core babel/preset-env -Dmodule.exports {module: {rules: [{test: /\.js$/,loader: babel-loader,exclude: /mode_modules/}]}
};// 新建 .babelrc 文件
{presets: [babel/preset-env],plugins: []
}转换 jsx 语法
使用 babel/preset-react或者使用 babel/preset-env 、 babel/react
方法一安装 babel/preset-env 、 babel/react
{presets: [babel/preset-env,babel/react],plugins: []
}方法二安装 babel/preset-react
{presets: [babel/preset-react],plugins: []
}使用低版本 babel
转换基本语法
安装 babel-loader、babel/core、babel/preset-env
module.exports {module: {rules: [{test: /\.js$/,loader: babel-loader,exclude: /mode_modules/,// 第一种配置在这里通过 options 配置预设options: {// 预设指示babel做什么样的兼容性处理presets: babel/preset-env}}]}
};// 第二种配置新建 .babelrc 文件
{presets: [babel/preset-env],plugins: []
}babel/preset-env 不能转换所有的 es6 语法比如 async await 、generator 函数只能转换基本语法最新版本的已支持如要测试请使用低版本 babel。
babel/pollyfill babel/pollyfill 相当于 babel 的补丁使用 babel/pollyfill 可以转换所有语法。 babel/pollyfill 是 core-js 和 generator 的集合推荐单独安装 core-js 和 generator 因为babel/pollyfill 会污染全局变量 babel/pollyfill 在 babel 7.4.0 以后已被弃用如果想测试需要安装低版本 babel 测试。 引入 babel/pollyfill 可以做 js 全部兼容性处理 会将所有的兼容性代码全部引入体积太大而且会污染全局变量
// 在需要处理的文件中通过 import 引入
import babel/pollyfill;按需加载
使用 core-js 可以解决 babel/pollyfill 全部引入导致体积太大的问题。core-js 和 babel/pollyfill 不能同时使用只安装一个即可 babel/pollyfill 内置有 core-js。
安装 core-js
// .babelrc
{presets: [[babel/preset-env,{// 按需加载useBuiltIns: usage,// 指定 core-js 版本corejs: 3}]],plugins: []
}babel-runtime
babel-runtime 可以解决 babel/pollyfill 污染全局变量的问题。
安装 babel/plugin-transform-runtime、babel/runtime
yarn add babel/plugin-transform-runtime -D
yarn add babel/runtime --save// .babelrc
{presets: [[babel/preset-env,{// 按需加载useBuiltIns: usage,// 指定 core-js 版本corejs: 3}]],plugins: [[babel/plugin-transform-runtime,{absoluteRuntime: false,corejs: 3,helpers: true,regenerator: true,useESModules: false}]]
}eslint 语法检查
安装 eslint、eslint-webpack-plugin
yarn add eslint eslint-webpack-plugin -Dconst EslintPlugin require(eslint-webpack-plugin);module.exports {plugins: [new EslintPlugin({context: path.resolve(__dirname, src), // 需要检测的根目录exclude: node_modules, // 需要排除的目录extensions: [js], // 需要检查的文件类型fix: true // 自动修复})]
};eslint 规则配置 参考 https://eslint.cn/docs/rules/
// .eslintrc.js
module.exports {root: true,env: {browser: true,node: true},extends: [eslint:recommended],rules: {no-console: [warn, { allow: [warn, error] }],block-spacing: [2, always],brace-style: [2, 1tbs, { allowSingleLine: true }],jsx-quotes: [2, prefer-single],quotes: [2,single,{avoidEscape: true,allowTemplateLiterals: true}],semi-spacing: [2,{before: false,after: true}],space-in-parens: [2, never],space-infix-ops: error,space-unary-ops: error,indent: 0,semi: error,comma-spacing: 0,space-before-blocks: 0,keyword-spacing: 0,key-spacing: [error, { afterColon: true }],no-multiple-empty-lines: 0,spaced-comment: [error,always,{line: {markers: [/],exceptions: [-, ]},block: {markers: [!],exceptions: [*],balanced: true}}],space-before-function-paren: 0,arrow-spacing: error,object-curly-spacing: 0,one-var-declaration-per-line: [error, always],array-bracket-newline: [error, consistent],no-lonely-if: error,object-curly-newline: [error,{ObjectPattern: { multiline: true },ImportDeclaration: { multiline: true },ExportDeclaration: { multiline: true }}],object-property-newline: [error, { allowAllPropertiesOnSameLine: false }],padding-line-between-statements: [error,{blankLine: always,prev: [const, let, var],next: *},{blankLine: any,prev: [const, let, var],next: [const, let, var]}],semi-style: [error, last],switch-colon-spacing: error,wrap-regex: error,default-case: error,guard-for-in: error,no-else-return: error,no-empty-function: error,no-new-func: error,no-useless-return: error,symbol-description: error,array-element-newline: [error, consistent, { multiline: true }],no-var: error,one-var: [error, consecutive],no-case-declarations: 0}
};// .eslintignore
// 需要忽略 eslint 检查的文件/.idea/*
/node_modules/*
/.eslintrc.js
static/fonts/*
/yarn.lock
/yarn-error.log
/.gitignore
airbnb 规则
使用 airbnb 规则如果不想自己一个个配置 eslint rules, 推荐使用 airbnb 规则需要用 eslint-config-airbnb-base 库。
yarn add eslint eslint-config-airbnb-base eslint-plugin-import -D// 还需要在 package.json 中配置
{eslintConfig: {extends: airbnb-base}
}babel/eslint-parser
使用 babel/eslint-parser 可以帮助你在使用 Babel 转换代码时避免 ESLint 中的语法错误。同时它也可以在您的代码中使用一些 Babel 特有的语法如 jsx 和 decorators时帮助 ESLint 正确解析和检查代码。
安装 eslint、babel/core、babe:/eslint-parser
yarn add eslint babel/eslint-parser -D
yarn add babel/core --savemodule.exports {root: true,env: {browser: true,node: true},extends: [eslint:recommended],parserOptions: {parser: babel/eslint-parser,sourceType: module,ecmaVersion: 6,ecmaFeatures: {jsx: true,experimentalObjectRestSpread: true}},rules: {// ...},
};常用插件
生成 html 文件
安装 html-webpack-plugin
yarn add html-webpack-pluginhtml-webpack-plugin 默认会创建一个没有任何结构样式的 html 文件会自动引入打包输出的所有资源。 但是我们需要有结构的 html 文件所以需要再配置 options。
// 引入插件
const HtmlWebpackPlugin require(html-webpack-plugin);// 不传参数默认生成一个 index.html 文件并且将打包后输出的所有资源插入 index.html 中
module.exports {plugins: [new HtmlWebpackPlugin()]
};// 传参数
const path require(path);module.exports {plugins: [new HtmlWebpackPlugin({// 指定要生成的 html 模板文件生成的 index.html 内容跟 /src/index.html 相同并且会自动引入打包后输出的所有资源template: path.resovle(__dirname, src/index.html),filename: other.html // 指定生成的 html 文件名})]
};提取 css 为单独文件
安装 mini-css-extract-plugin
yarn add mini-css-extract-plugin使用 mini-css-extract-plugin 可以将打包后的 css 文件以 link 的方式插入 html 中
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {module: {rules: [{test: /\.css$/,use: [// 将 style-loader 换成 MiniCssExtractPlugin 内置的loader// 从而将提取出的 css 文件以 link 的方式插入 html 中MiniCssExtractPlugin.loader,css-loader,postcss-loader]}]},plugins: [// 默认输出到 output 指定目录下和 js 平级main.cssnew MiniCssExtractPlugin({// 可以通过参数指定打包后的路径和文件名输出为 output 指定目录下的 /css/style.cssfilename: css/style.css})]
};压缩 js
mode: production 自动压缩 jsmode: development 设置 minimize: true 可压缩
module.exports {mode: production,
};module.exports {mode: development,optimization: {minimize: true}
};如果使用了 css-minimizer-webpack-plugin 压缩 css那么 js 压缩会失效需要手动安装 terser-webpack-plugin 插件
yarn add terser-webpack-pluginconst MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerWebpackPlugin require(css-minimizer-webpack-plugin);
const TerserWebpackPlugin require(terser-webpack-plugin);module.exports {mode: development,module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,css-loader,postcss-loader]}]},optimization: {minimize: true,minimizer: [// 压缩 js解决压缩 css 导致压缩 js 失效的问题new TerserWebpackPlugin(),// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: css/style.css})]
};压缩 css
安装 css-minimizer-webpack-plugin
yarn add css-minimizer-webpack-plugincss-minimizer-webpack-plugin 必须要配合 mini-css-extract-plugin 使用只能对单独的 css 文件进行压缩只在 mode: production‘ 有效如果希望在 mode: developmemt‘ 有效需要设置 minimize: true
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerWebpackPlugin require(css-minimizer-webpack-plugin);module.exports {mode: production,module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,css-loader,postcss-loader]}]},optimization: {minimizer: [// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: css/style.css})]
};const MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerWebpackPlugin require(css-minimizer-webpack-plugin);module.exports {mode: development,module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,css-loader,postcss-loader]}]},optimization: {minimize: true,minimizer: [// 压缩 cssnew CssMinimizerWebpackPlugin(),],},plugins: [new MiniCssExtractPlugin({filename: css/style.css})]
};压缩 html 文件
html-webpack-plugin
module.exports {plugins: [new HtmlWebpackPlugin({// 配置 minify 属性进行压缩minify: {collapseWhitespace: true, // 移除空行removeComments: true // 移除注释}})]
};html-minimizer-webpack-plugin
const HtmlMinimizerWebpackPlugin require(html-minimizer-webpack-plugin);module.exports {mode: production,plugins: [// 压缩 htmlnew HtmlMinimizerWebpackPlugin()]
};const HtmlMinimizerWebpackPlugin require(html-minimizer-webpack-plugin);module.exports {mode: development,optimization: {minimize: true},plugins: [// 压缩 htmlnew HtmlMinimizerWebpackPlugin()]
};其他插件
copy-webpack-plugin
yarn add copy-webpack-plugin拷贝文件而是用来复制源代码中已经存在的文件比如一些静态资源拷贝到指定的地方去并不是用来复制打包生成的文件。比如有一些全局的配置直接拷贝到目标文件夹下去后续这些全局配置文件内容有改变就不需要重新打包可以直接替换部署的文件
const CopyPlugin require(copy-webpack-plugin);module.exports {plugins: [new CopyPlugin({patterns: [{ from: path.resolve(__dirname, src, static), to: public }]})]
};
