企业做网站预付账款会计分录,网站建设 图纸网,方案策划网站,云南省建设注册考试中心网站前言 你是否也是只会运用框架中集成好的Webpack配置呢#xff1f;你明白每一项的意义么#xff1f;你懂多少Webpack的个性化配置项呢#xff1f;本篇文章为你讲解Webpack中的各种配置项参数及作用#xff01; 文章目录了解Webpack相关开启项目编译打包应用使用webpack配置…前言 你是否也是只会运用框架中集成好的Webpack配置呢你明白每一项的意义么你懂多少Webpack的个性化配置项呢本篇文章为你讲解Webpack中的各种配置项参数及作用
文章目录了解Webpack相关开启项目编译打包应用使用webpack配置文件打包less资源js语法检查js语法转换js兼容性处理打包样式文件中的图片资源打包html文件打包html中图片资源打包其他资源自动编译打包运行热模替换功能devtool准备生产环境清除打包文件目录提取css成单独文件添加css兼容压缩css压缩html了解Webpack相关
什么是webpack Webpack是一个模块打包器(bundler)。 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理 它将根据模块的依赖关系进行静态分析生成对应的静态资源
五个核心概念 Entry入口起点(entry point)指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。 Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles以及如何命名这些文件默认值为 ./dist。 Loaderloader 让 webpack 能够去处理那些非 JavaScript 文件webpack 自身只能解析 JavaScript。 Plugins插件则可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩一直到重新定义环境中的变量等。 Mode模式有生产模式production和开发模式development
理解Loader Webpack 本身只能加载JS/JSON模块如果要加载其他类型的文件(模块)就需要使用对应的loader 进行转换/加载 Loader 本身也是运行在 node.js 环境中的 JavaScript 模块 它本身是一个函数接受源文件作为参数返回转换的结果 loader 一般以 xxx-loader 的方式命名xxx 代表了这个 loader 要做的转换功能比如 json-loader。
理解Plugins 插件可以完成一些loader不能完成的功能。 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
配置文件(默认) webpack.config.js : 是一个node模块返回一个 json 格式的配置信息对象
开启项目
初始化项目
生成package.json文件 {name: webpack_test,version: 1.0.0} 安装webpack
npm install webpack webpack-cli -g //全局安装,作为指令使用npm install webpack webpack-cli -D //本地安装,作为本地依赖使用编译打包应用
创建js文件
src/js/app.jssrc/js/module1.jssrc/js/module2.jssrc/js/module3.js
创建json文件 src/json/data.json 创建主页面: src/index.html运行指令
开发配置指令webpack src/js/app.js -o dist/js/app.js --modedevelopment功能: webpack能够编译打包js和json文件并且能将es6的模块化语法转换成浏览器能识别的语法生产配置指令webpack src/js/app.js -o dist/js/app.js --modeproduction功能: 在开发配置功能上加上一个压缩代码
结论
webpack能够编译打包js和json文件能将es6的模块化语法转换成浏览器能识别的语法能压缩代码
缺点
不能编译打包css、img等文件不能将js的es6基本语法转化为es5以下语法
改善 使用webpack配置文件解决自定义功能
使用webpack配置文件
目的 在项目根目录定义配置文件通过自定义配置文件还原以上功能
文件名称 webpack.config.js
文件内容 const { resolve } require(path); //node内置核心模块用来设置路径。module.exports {entry: ./src/js/app.js, // 入口文件配置简写/*完整写法entry:{main:./src/js/app.js}*/output: { // 输出配置filename: ./js/built.js, // 输出文件名path: resolve(__dirname, build) //输出文件路径配置},mode: development //开发环境(二选一)mode: production //生产环境(二选一)};运行指令 webpack
打包less资源
概述 less文件webpack不能解析需要借助loader编译解析
创建less文件
src/less/test1.lesssrc/less/test2.less入口app.js文件 引入less资源 安装loader npm install css-loader style-loader less-loader less --save-dev
配置loader {test: /\.less$/, // 检查文件是否以.less结尾检查是否是less文件use: [ // 数组中loader执行是从下到上从右到左顺序执行style-loader, // 创建style标签添加上js中的css代码css-loader, // 将css以commonjs方式整合到js文件中less-loader // 将less文件解析成css文件]},运行指令 webpack
js语法检查
概述 对js基本语法错误/隐患进行提前检查
安装loader
npm install eslint-loader eslint --save-dev备注1在eslint.org网站 - userGuide - Configuring ESLint 查看如何配置备注2在eslint.org网站 - userGuide - Rules 查看所有规则
配置loader module: {rules: [{test: /\.js$/, //只检测js文件exclude: /node_modules/, //排除node_modules文件夹enforce: pre, //提前加载使用use: { //使用eslint-loader解析loader: eslint-loader }} ]}加粗样式 eslintConfig: {parserOptions: {ecmaVersion: 6, // 支持es6sourceType: module // 使用es6模块化},env: { // 设置环境browser: true, // 支持浏览器环境 能够使用window上的全局变量node: true // 支持服务器环境: 能够使用node上global的全局变量},globals: { // 声明使用的全局变量, 这样即使没有定义也不会报错了$: readonly // $ 只读变量},rules: { // eslint检查的规则 0 忽略 1 警告 2 错误no-console: 0, // 不检查consoleeqeqeq: 2, // 用而不用就报错no-alert: 2 // 不能使用alert},extends: eslint:recommended // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/},运行指令 webpack
js语法转换
概述 将浏览器不能识别的新语法转换成原来识别的旧语法做浏览器兼容性处理
安装loader
npm install babel-loader babel/core babel/preset-env --save-dev配置loader module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: babel-loader,options: {presets: [babel/preset-env]}}}]}运行指令 webpack
js兼容性处理
第一种方法使用经典的polyfill
安装包
npm install babel/polyfill使用
app.js
import babel/polyfill; // 包含ES6的高级语法的转换优点 解决babel只能转换部分低级语法的问题(如let/const/解构赋值…)引入polyfill可以转换高级语法(如:Promise…)
缺点 将所有高级语法都进行了转换但实际上可能只使用一部分
解决 需要按需加载使用了什么高级语法就转换什么而其他的不转换
第二种方法借助按需引入core-js按需引入
安装包
npm install core-js配置loader
{test: /\.js$/,exclude: /(node_modules)/,use: {loader: babel-loader,options: {presets: [[babel/preset-env,{useBuiltIns: usage, // 按需引入需要使用polyfillcorejs: { version: 3 }, // 解决warntargets: { // 指定兼容性处理哪些浏览器chrome: 58,ie: 9,}}]],cacheDirectory: true, // 开启babel缓存}}},打包样式文件中的图片资源
概述图片文件webpack不能解析需要借助loader编译解析
添加2张图片:
小图, 小于8kb: src/images/vue.png大图, 大于8kb: src/images/react.jpg在less文件中通过背景图的方式引入图片
安装loader
npm install file-loader url-loader --save-dev 补充 url-loader是对象file-loader的上层封装使用时需配合file-loader使用。
配置loader {test: /\.(png|jpg|gif)$/,use: {loader: url-loader,options: {limit: 8192, // 8kb -- 8kb以下的图片会base64处理outputPath: images, // 决定文件本地输出路径publicPath: ../build/images, // 决定图片的url路径name: [hash:8].[ext] // 修改文件名称 [hash:8] hash值取8位 [ext] 文件扩展名}}},运行指令 webpack
打包html文件
概述 html文件webpack不能解析需要借助插件编译解析
添加html文件 src/index.html 注意不要在html中引入任何css和js文件
安装插件Plugins
npm install html-webpack-plugin --save-dev 在webpack.config.js中引入插件插件都需要手动引入而loader会自动加载
const HtmlWebpackPlugin require(html-webpack-plugin)配置插件Plugins plugins: [new HtmlWebpackPlugin({template: ./src/index.html, // 以当前文件为模板创建新的HtML(1. 结构和原来一样 2. 会自动引入打包的资源)}),]运行指令 webpack
打包html中图片资源
概述 html中的图片url-loader没法处理它只能处理js中引入的图片 / 样式中图片不能处理html中img标签需要引入其他html-loader处理。
添加图片 在src/index.html添加两个img标签
安装loader
npm install html-loader --save-dev 配置loader {test: /\.(html)$/,use: {loader: html-loader}}运行指令 webpack
打包其他资源
概述 其他资源webpack不能解析需要借助loader编译解析
添加字体文件
src/media/iconfont.eotsrc/media/iconfont.svgsrc/media/iconfont.ttfsrc/media/iconfont.woffsrc/media/iconfont.woff2
修改样式 font-face {font-family: iconfont;src: url(../media/iconfont.eot);src: url(../media/iconfont.eot?#iefix) format(embedded-opentype),url(../media/iconfont.woff2) format(woff2),url(../media/iconfont.woff) format(woff),url(../media/iconfont.ttf) format(truetype),url(../media/iconfont.svg#iconfont) format(svg);}.iconfont {font-family: iconfont !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}配置loader {test: /\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理其他资源loader: file-loader,options: {outputPath: media,name: [hash:8].[ext]}}运行指令 webpack
自动编译打包运行
安装loader
npm install webpack-dev-server --save-dev详细配置见官网指南 - 开发环境 - 使用webpack-dev-server 修改webpack配置对象注意不是loader中 devServer: {open: true, // 自动打开浏览器compress: true, // 启动gzip压缩port: 3000, // 端口号}修改url-loader部分配置
因为构建工具以build为根目录不用再找build了publicPath: ../build/images/ -- publicPath: images/
修改package.json中scripts指令
start: webpack-dev-server,运行指令 npm run start
注意webpack-dev-server指令才能启动devServer配置然后配置到package.json中才行
热模替换功能
概述 热模块替换HMR是webpack提供的最有用的功能之一。它允许在运行时更新所有类型的模块而无需完全刷新只更新变化的模块不变的模块不更新。
详细配置见官网指南 - 模块热替换
修改devServer配置 devServer: {contentBase: resolve(__dirname, build), // 运行项目的目录open: true, // 自动打开浏览器compress: true, // 启动gzip压缩port: 3000, // 端口号hot: true // 开启热模替换功能 HMR}问题 html文件无法自动更新了需要增加一个入口 entry: [./src/js/app.js,./src/index.html]devtool
概述 一种将压缩/编译文件中的代码映射回源文件中的原始位置的技术让我们调试代码不在困难
详细配置见官网配置 - devtool
介绍 cheap 只保留行, 编译速度快 eval webpack生成的代码每个模块彼此分开并使用模块名称进行注释, 编译速度快 inline 以base64方式将source-map嵌入到代码中缺点造成编译后代码体积很大
推荐使用 开发环境 cheap-module-eval-source-map 生产环境 cheap-module-source-map 以上就是webpack开发环境的配置可以在内存中自动打包所有类型文件并有自动编译运行、热更新等功能。 准备生产环境
创建文件夹config
将webpack.config.js复制两份
./config/webpack.dev.js./config/webpack.prod.js修改webpack.prod.js配置删除webpack-dev-server配置 // / 代表根路径(等价于这个http://localhost:5000/)以后项目上线所有路径都以当前网址为根路径出发module.exports {output: {path: resolve(__dirname, ../build), // 文件输出目录filename: ./js/built.js, // 文件输出名称publicPath: / // 所有输出资源在引入时的公共路径若loader中也指定了publicPath会以loader的为准。},module: {rules: [{test: /\.(png|jpg|gif)$/,use: {loader: url-loader,options: {limit: 8192, outputPath: images, publicPath: /images, // 重写publicPath需要在路径前面加上 /name: [hash:8].[ext] }}}, ]},mode: production, //修改为生产环境devtool: cheap-module-source-map // 修改为生产环境的错误提示// 删除devServer}修改package.json的指令 “start”: “webpack-dev-server --config ./config/webpack.dev.js” “dev”: “webpack-dev-server --config ./config/webpack.dev.js” “build”: “webpack --config ./config/webpack.prod.js”
开发环境指令
npm start
npm run dev生产环境指令
npm run build注意: 生产环境代码需要部署到服务器上才能运行 serve这个库能帮助我们快速搭建一个静态资源服务器
npm i serve -g
serve -s build -p 5000清除打包文件目录
概述 每次打包生成了文件都需要手动删除引入插件帮助我们自动删除上一次的文件 安装插件
npm install clean-webpack-plugin --save-dev引入插件
const { CleanWebpackPlugin } require(clean-webpack-plugin);// 注意要解构赋值配置插件
new CleanWebpackPlugin() // 自动清除output.path目录下的文件运行指令 npm run build
提取css成单独文件
安装插件 npm install mini-css-extract-plugin --save-dev
引入插件 const MiniCssExtractPlugin require(“mini-css-extract-plugin”);
配置loader {test: /\.less$/,use: [MiniCssExtractPlugin.loader,css-loader,less-loader,]}配置插件 new MiniCssExtractPlugin({filename: css/[name].css,})运行指令
npm run build
serve -s build添加css兼容
安装loader
npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer --save-dev 配置loader {test: /\.less$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {ident: postcss,plugins: () [require(postcss-flexbugs-fixes),require(postcss-preset-env)({autoprefixer: {flexbox: no-2009,},stage: 3,}),require(postcss-normalize)(),],sourceMap: true,},},less-loader,]}添加配置文件: .browserslistrc last 1 version 1%IE 10 # sorry运行指令
npm run build
serve -s build压缩css
安装插件
npm install optimize-css-assets-webpack-plugin --save-dev 引入插件
const OptimizeCssAssetsPlugin require(optimize-css-assets-webpack-plugin); 配置插件 new OptimizeCssAssetsPlugin({cssProcessorPluginOptions: {preset: [default, { discardComments: { removeAll: true } }],},cssProcessorOptions: { // 解决没有source map问题map: {inline: false,annotation: true,}}})运行指令
npm run build
serve -s build 压缩html
修改插件配置 new HtmlWebpackPlugin({template: ./src/index.html,minify: {removeComments: true,collapseWhitespace: true,removeRedundantAttributes: true,useShortDoctype: true,removeEmptyAttributes: true,removeStyleLinkTypeAttributes: true,keepClosingSlash: true,minifyJS: true,minifyCSS: true,minifyURLs: true,}})运行指令
npm run build
serve -s dist 以上就是webpack生产环境的配置可以生成打包后的文件。 本期推荐
最近几年Vue越来越火热BAT等互联网大厂都在前端职位招聘中加入了精通Vue.js框架的要求就连饿了么公司的技术团队也专门为Vue.js设计了UI框架体系。本书的实操案例都是笔者独立完成的实际项目有着对标市场实际需求的参考价值同时本书提供的框架模式可以让读者应用于其他项目从而提高开发效率减少开发弯路。 本书从Vue.js框架技术的基础概念出发逐步深入Vue.js进阶实战并在最后配合一个网站项目和一个后台系统开发实战案例重点介绍了使用Vue.jsaxiosElementUIwangEditor进行前端开发和使用组件进行Vue单页面网页复用让读者不但可以系统地学习Vue.js前端开发框架的相关知识而且还能对业务逻辑的分析思路、实际应用开发有更为深入的理解。 本书语言平实用词诙谐案例丰富实用性强特别适合刚入社会的职场新人、Vue.js框架的初级读者和进阶读者阅读也适合希望从后台开发转型做前端的程序员等其他编程爱好者阅读。另外本书也适合作为相关培训机构的教材使用。
