西安哪个公司可以做网站,wordpress如何安装主题,石家庄网站建设求职简历,景区网站建设公司目录
1 webpack的安装
2 webpack的配置
配置流程#xff1a;
1 webpack安装
2 创建webpack配置文件 webpack.config.js
3 配置入口 entry
单入口和多入口
2. 动态配置入口文件
4 配置出口 output
5 配置模式 mode#xff08;webpack4#xff09;
6 配置解析策略 …
目录
1 webpack的安装
2 webpack的配置
配置流程
1 webpack安装
2 创建webpack配置文件 webpack.config.js
3 配置入口 entry
单入口和多入口
2. 动态配置入口文件
4 配置出口 output
5 配置模式 modewebpack4
6 配置解析策略 resolve
7 配置解析和转换文件的策略 module : loader
1. noParse
2. rules
8 、配置优化 optimizationwebpack4
1. 最小化包
2. 拆包
拆分业务代码
拆分第三方库
动态加载
9、配置 plugin 插件
Eslint Babel
10 watch 与 watchOptions
watch 参考
1 模块化
2前端模块化(AMD、CMD、commonJs、ES6) 前端代码为何要进行构建和打包
module chunk bundle 分别什么意思有何区别
loader 和 plugin 的区别
webpack 如何实现懒加载
webpack 常见性能优化
bable-runtime 和 babel-polyfill 的区别 1 webpack的安装
wepack为了正常运行必须依赖node环境而node环境为了可以正常的执行必须使用npm工具管理node中各种依赖的包
安装webpack首先要安装Node.jsNode.js自带了软件包管理工具npm全局安装webpacknpm install webpack3.6.0 -g局部安装webpcknpm install webpack3.6.0 --save-dev–save-dev是开发时依赖项目打包后不需要继续使用。
2 webpack的配置
webpack配置_shkmzzh的博客-CSDN博客
webpack配置完全指南_webpack 配置_gogo2027的博客-CSDN博客
webpack 之后会发现很简单基础的配置可以分为以下几个方面 entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等 webpack 是前端的打包工具 打包的工作内容是什么
扫描项目生成整个项目所有模块的依赖关系根据配置对模块进行合并生成一个单独的文件。修改html文件让html文件引用生成后的文件将浏览器无法直接识别的less、sass、ts文件转换成浏览器可以实现的内容。将浏览器暂时无法支持的JS新的语法转换成浏览器可以支持的语法
配置流程
1 webpack安装
webpack是基于node.js的使用前需要安装node -D 是 --save-dev 的缩写表示开发时依赖只在项目开发阶段用到。 -S 是 --save 的缩写表示运行时依赖即项目打包发布运行时要用到。 npm初始化
npm init -y
安装webpack
webpack内部还依赖webpack-cli所以webpack-cli也要安装
npm install --save-dev webpack webpack-cli
2 创建webpack配置文件 webpack.config.js // 导入path模块
const path require(path)
// webpack配置
module.exports {// 配置打包入口文件entry: path.resolve(__dirname, src, index.js),// 配置打包输出位置及文件名output: {path: path.resolve(__dirname, dist),// 输出文件名filename: bundle.js}
}
3 配置入口 entry
单入口和多入口
module.exports { entry: ./index.js, }
2. 动态配置入口文件
当构建项目包含多个子项目时每次增加一个子系统都需要将入口文件写入 webpack 配置文件中其实我们让webpack 动态获取入口文件例如
// 使用 glob 等工具使用若干通配符运行时获得 entry 的条目
module.exports {entry: glob.sync(./project/**/index.js).reduce((acc, path) {const entry path.replace(/index.js, )acc[entry] pathreturn acc}, {}),
}4 配置出口 output
用于告知 webpack 如何构建编译后的文件可以自定义输出文件的位置和名称:
module.exports {output: { // path 必须为绝对路径// 输出文件路径path: path.resolve(__dirname, ../../dist/build),// 包名称filename: [name].bundle.js,// 或使用函数返回名(不常用)// filename: (chunkData) {// return chunkData.chunk.name main ? [name].js: [name]/[name].js;// },// 块名公共块名(非入口)chunkFilename: [name].[chunkhash].bundle.js,// 打包生成的 index.html 文件里面引用资源的前缀// 也为发布到线上资源的 URL 前缀// 使用的是相对路径默认为 publicPath: /, }
}在 webpack4 开发模式下会默认启动 output.pathinfo 它会输出一些额外的注释信息对项目调试非常有用尤其是使用 eval devtool 时。
filename [name] 为 entry 配置的 key除此之外还可以是 [id] 内部块 id 、 [hash]、[contenthash] 等。
5 配置模式 modewebpack4
设置 mode 可以让 webpack 自动调起相应的内置优化
module.exports {// 可以是 none、development、production// 默认为 productionmode: production
}production 模式下给你更好的用户体验
较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产
development 模式会给予你最好的开发体验
浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息
6 配置解析策略 resolve
自定义寻找依赖模块时的策略例如 import _ from lodash:
module.exports {resolve: {// 设置模块导入规则import/require时会直接在这些目录找文件// 可以指明存放第三方模块的绝对路径以减少寻找// 默认 node_modulesmodules: [path.resolve(${project}/components), node_modules],// import导入时省略后缀// 注意尽可能的减少后缀尝试的可能性extensions: [.js, .jsx, .react.js, .css, .json],// import导入时别名减少耗时的递归解析操作alias: {components: path.resolve(${project}/components),style: path.resolve(asset/style),},// 很多第三方库会针对不同的环境提供几份代码// webpack 会根据 mainFields 的配置去决定优先采用那份代码// 它会根据 webpack 配置中指定的 target 不同默认值也会有所不同mainFields: [browser, module, main],},
}7 配置解析和转换文件的策略 module : loader
决定如何处理项目中不同类型的模块通常是配置 module.rules 里的 Loader:
// webpack配置
module.exports {// ...// 扩展文件加载模块 - css模块加module: {// 由于可以加载多种文件每种文件对应一种loader所以是数组rules: [// 由于是多种文件所以使用扩展名进行区分再应用不同的loader{// 正则判断文件类型test: /\.css$/i,// 这种类型文件使用以下loaderuse: [style-loader, css-loader],},{// 判断less文件test: /\.less$/i,use: [style-loader,css-loader,less-loader]},{// 加载图片资料模板test: /\.(png|jpg|jpeg|gif|svg)$/,type: asset/resource},{// 加载字体文件test: /\.(eot|ttf|otf|woff2)$/,type: asset}]}
}1. noParse
指明 webpack 不去解析某些内容该方式有助于提升 webpack 的构建性能。
2. rules
常见的 loader 有 babel-loader解析 .js 和 .jsx 文件 tsx-loader处理 ts 文件 less-loader处理 less 文件并将其编译为 css sass-loader处理 sass、scss 文件并将其编译为 css postcss-loader css-loader处理 css 文件 style-loader将 css 注入到 DOM file-loader将文件上的import / require 解析为 url并将该文件输出到输出目录中 url-loader用于将文件转换成 base64 uri 的 webpack 加载程序 html-loader将 HTML 导出为字符串 当编译器要求时将 HTML 最小化 8 、配置优化 optimizationwebpack4
webapck4 会根据你所选择的 mode 进行优化你可以手动配置它将会覆盖自动优化
主要涉及两方面的优化
最小化包拆包 1. 最小化包
2. 拆包
拆分 node_modules
很多情况下我们不需要手动拆分包可以使用 optimization.splitChunks
拆分业务代码
拆分第三方库
动态加载 9、配置 plugin 插件
配置 Plugin 去处理及优化其它的需求
Eslint
npm i eslint-webpack-plugin eslint -D
配置文件由很多种写法
.eslintrc.*新建文件位于项目根目录 .eslintrc.eslintrc.js.eslintrc.json区别在于配置格式不一样package.json 中 eslintConfig不需要创建文件在原有文件基础上写rules 具体规则off 或 0 - 关闭规则warn 或 1 - 开启规则使用警告级别的错误warn (不会导致程序退出)error 或 2 - 开启规则使用错误级别的错误error (当被触发的时候程序会退出) Babel
npm i babel-loader babel/core babel/preset-env -D
配置文件由很多种写法
babel.config.*新建文件位于项目根目录 babel.config.js babel.config.json package.json 中 babel不需要创建文件在原有文件基础上写 Babel 会查找和自动读取它们所以以上配置文件只需要存在一个即可
module.exports {plugins: [// 优化 requirenew webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en|zh/),// 用于提升构建速度createHappyPlugin(happy-babel, [{loader: babel-loader,options: {presets: [babel/preset-env, babel/preset-react],plugins: [[babel/plugin-proposal-class-properties, {loose: true}]],// babel-loader 支持缓存转换出的结果通过 cacheDirectory 选项开启cacheDirectory: true,// Save disk space when time isnt as importantcacheCompression: true,compact: true,}}])]
}常用 plugins
html-webpack-plugin生成 html 文件并将包添加到 html 中 webpack-parallel-uglify-plugin压缩 js多进程并行处理压缩 happypack多线程loader用于提升构建速度 hard-source-webpack-plugin为模块提供中间缓存步骤显著提高打包速度 webpack-merge合并 webpack 配置 mini-css-extract-plugin抽离 css optimize-css-assets-webpack-plugin压缩 css add-asset-html-webpack-plugin将 JavaScript 或 CSS 资产添加到 html-webpack-plugin 生成的 HTML 中 更多插件可见plugins
10 watch 与 watchOptions
我们可以在命令行里启动监听 --watch
webpack --watch --config webpack.config.dev.js
在 webpack-dev-server 和 webpack-dev-middleware 中默认启用了监视模式。
watch
监视文件更新并在文件更新时重新编译
module.export {// 启用监听模式watch: true,
}webpack看这一篇就够了_itpeilibo的博客-CSDN博客 参考
1 模块化
前端模块化开发_Ukashi的博客-CSDN博客
简单来说将一个项目划分为不同的功能模块来开发维护的过程就是模块化。 js一开始并没有模块化的概念直到ajax被提出前端能够像后端请求数据前端逻辑越来越复杂就出现了许多问题全局变量函数名冲突依赖关系不好处理。模块化就是衍生出来解决这些问题的一种方法
模块化开发优点
解决命名冲突提供复用性提高代码可维护性灵活架构焦点分离方便模块间组合、分解多人协作互不干扰 2前端模块化(AMD、CMD、commonJs、ES6)
前端模块化(AMD、CMD、commonJs、ES6)_前端amd_GA莹莹子的博客-CSDN博客
CommonJs和ES6模块化的区别 1.CommonJs模块引入方式使用require()导出的方式是module.exportsvalue或exports.xxvalue。 ES6使用import {} from(必须放在文件开头)和export let/const或export {}引入和导出。2.CommonJs模块输出的是一个值的拷贝。 ES6输出的是值的引用。 3.CommonJs模块是运行时加载加载的是一个对象(exports或module.exports)。 ES6模块是编译(将import语法转化为require)时加载的效率更高不是对象它的对外接口是一种静态定义只有在脚本使用时才会调用。 ES6渐渐取代CommonJs
