建站的方式有哪些,创建一个餐饮公司的模板,本地东莞网站建设,设计网站中企动力优1. Webpack 当前Web开发面临的困境 文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是一个流行的前端项目构建工具,可以解决当前web开发中所面临的困境. webpack提供了友好的模块化支持,以及代码压…1. Webpack 当前Web开发面临的困境 文件依赖关系错综复杂静态资源请求效率低模块化支持不友好浏览器对高级JavaScript特性兼容程度低 1.1 webpack概述 webpack是一个流行的前端项目构建工具,可以解决当前web开发中所面临的困境. webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性 1.2 webpack的基本使用 1.2.1 创建列表隔行变色项目 创建package.json: npm init -y新建src: 源代码目录新建 src - index.html初始化页面基本的结构 headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./index.js/script /head bodyulli这是第1个li/lili这是第2个li/lili这是第3个li/lili这是第4个li/lili这是第5个li/lili这是第6个li/lili这是第7个li/lili这是第8个li/lili这是第9个li/li/ul /body// index.js import $ from jquery$(function() {$(li:odd).css(backgroundColor, lightblue)$(li:even).css(backgroundColor, #ccc) })浏览器对ES6的兼容性不是很好,因此以上代码可能不会显示列表隔行变色.故下面需要使用webpack配置对ES6的支持 1.2.2 在项目中安装和配置webpack 安装webpack相关的包: npm install webpack webpack-cli -D在项目根目录中,创建名为 webpack.config.js的webpack配置文件在webpack的配置文件中,初始化如下基本配置: module.exports {mode: development }在 package.json配置文件中的scripts节点下,新增dev脚本如下: scripts:{dev: webpack }完成上述配置后,在命令行输入:npm run dev, webpack就会在当前目录的dist文件夹下面自动生成一个main.js文件.里面装的是浏览器兼容的JS代码因此只需在index.html中导入main.js即可完成2.2.1的需求 1.2.3 入口与出口 webpack的4.x版本中默认约定: 打包的入口文件为 src - index.js打包的输出文件为 dist - main.js 如果要修改打包的入口与出口,可以修改webpack.config.js: const path require(path); module.exports {entry: path.join(__dirname, ./src/index.js),output: {path: path.join(__dirname, ./dist),filename: bundle.js} }1.2.4 自动打包功能 自动打包工具: npm install webpack-dev-server -D修改 package.json - scripts // package.json scripts: {dev: webpack-dev-server }执行后会有如下几行输出 i wds: Project is running at http://localhost:8080/ i wds: webpack output is served from / i wds: Content not from webpack is served from D:\series\17 i wdm: Hash: 5ea127005e76e344e080 Version: webpack 4.41.6 Time: 429ms Built at: 2020-02-12 18:46:23Asset Size Chunks Chunk Names bundle.js 671 KiB main [emitted] main Entrypoint main bundle.js第一句话说明项目运行在 http://localhost:8080’中 第二句话说明项目的打包文件在当前目录下,最好一句话说明打包的名字为bundle.js(在内存中) 因此需要在index.html 导入打包的文件 在http://localhost:8080地址查看自动打包效果 1.2.5 html-webpack-plugin生成预览页面 作用: 将src下面的index.html复制到内存中,且默认的路径是项目的根目录,还会自动导入内存中的bundle.js 使用步骤: npm install html-webpack-plugin 修改webpack.config.js const HtmlWebpackPlugin require(html-webpack-plugin) const htmlPlugin new HtmlWebpackPlugin({template: ./src/index.html, // 指定要用到的模板文件filename: index.html })module.exports {plugins: [htmlPlugin] }1.2.6 自动打包相关参数 // package.json // --open 打包完成后自动打开浏览器 // --host 配置IP地址 // --port 配置端口 scripts: {dev: webpack-dev-server --open --host 127.0.0.1 --port 8888 }1.3 通过loader打包非js模块 在实际开发中,webpack默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名的模块,webpack默认处理不了,需要调用 loader 加载器才可以正常打包. 1.3.1 打包处理CSS文件 npm i style-loader css-loader -Dwebpack.config.js - module - rules // webpack.config.js module.exports {module:{rules: {test: /\.css$/, use: [style-loader, css-loader]}} } // 多个loader的调用顺序是: 从后往前调用的1.3.2 打包处理less文件 npm i less-loader less -Dwebpack.config.js - module - rules // webpack.config.js module.exports {module:{rules: {test: /\.less$/, use: [style-loader, css-loader,less-loader]}} } // 多个loader的调用顺序是: 从后往前调用的 // can not find module less - 是因为没用安装less1.3.3 打包处理scss文件 npm i sass-loader node-sass -Dwebpack.config.js - module - rules // webpack.config.js module.exports {module:{rules: {test: /\.scss$/, use: [style-loader, css-loader,sass-loader]}} } // 多个loader的调用顺序是: 从后往前调用的 // 安装的是sass,验证的是scss // node-sass的安装可能需要改变源,1.3.4 自动添加css的兼容前缀 npm i postcss-loader autoprefixer -D // postcss.config.js const autoprefixer require(autoprefixer) module.exports {pulugins: [autoprefixer] }// webpack.config.js module.exports {module:{rules:[{ test: /\.css$/, use: [style-loader, css-loader, postcss-loader]}]} }1.3.5 打包样式表中的图片和字体文件 npm i url-loader file-loader -D // webpack.config.js module.exports {module:{rules:[{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use:url-loader?limit16940 }]} }其中 之后的是loader的参数项. limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转为base64图片 1.3.6 打包处理js文件中的高级语法 babel转换器相关的: npm i babel-loader babel/core babel/runtime -D babel语法插件相关的: npm i babel/preset-env babel/plugin-transform-runtime babel/plugin-proposal-class-properties -D // babel.config.js module.exports {presets: [babel/preset-env],plugins: [ babel/plugin-transform-runtime, babel/plugin-proposal-class-properties] }// webpack.config.js module.exports {module:{rules:[{ test: /\.js$/, use: babel-loader, exclude: /node_modules/ }]} }1.3.7 webpack中配置vue组件的加载器 npm i vue-loader vue-template-compiler -D // webpack.config.js const VueLoaderPlugin require(vue-loader/lib/plugin) module.exports {module:{rules:[{ test: /\.vue$/, loader: vue-loader}]},plugins:[new VueLoaderPlugin()] }