第一章 初识 webpack
1.引言
-
使用webpack 进行工程化开发
-
本地全局安装webpack
npm install webpack@4 -g npm install webpack-cli@3 -g -
在项目中安装webpack
-
初始化包描述文件
npm init -y -
安装webpack和webpack-cli开发依赖
npm install webpack@4 -D npm install webpack-cli@3 -D
-
-
2.打包js文件
-
所有需要执行的文件，应该在入口文件中引入。
main.js
import './asset/js/example.js'; -
配置文件webpack.config.js
注意：配置文件中模块导入导出只能使用CommonJS语法规范。
核心概念(基础结构)：
入口（entry）:整个项目必须指定一个打包的入口文件。
出口（output）：项目打包后输出的目录。
loader(加载器) ：用来识别各种文件。
插件（plugin）
模式（mode）:采用什么方式打包。有两种方式：开发模式（development），生产模式（production）。开发模式代码不压缩，生产模式代码压缩。用户最终见到的是production。
//引入path模块（nodeJS 内置模块，用于处理路径） const PATH = require('path'); module.exports = { entry:'./src/main.js', output:{ //打包后的文件名 filename:'app.js', //打包文件的输出路径,__dirname 全局变量返回的是 当前项目的绝对路径。 dist 是打包后文件保存的目录。 path:PATH.resolve(__dirname,'dist'), }, mode:'development' }#打包命令 webpack
3.打包css文件
-
入口文件引入
main.js
import './asset/css/example.css'; -
添加loader开发依赖
css-loader 、style-loader
npm install css-loader@3.4.2 -D npm install style-loader@1.1.3 -D -
配置文件
webpack.config.js
webpack默认只能处理js文件和json文件，如果要处理其他文件，需要引入对应的加载器（loader）。
//... module.exports = { //... //loaders。通过module选项，配置加载器。 module:{ //在rules选项中，配置具体的加载器，该选项是一个数组（对象数组）。 rules:[ //每个对象处理一种文件 { //指定文件的格式，使用正则表达式（RegExp）进行匹配。 test:/\.css$/, //处理该文件使用到的loader //注意：loader的加载顺序是从右向左。所有一定要先识别css文件再解析文件中的编码格式。 use:[ //style-loader 将js中的css代码，以style标签的方式嵌入到网页中。 {loader:'style-loader'}, //css-loader将css文件以模块化方式导入到js中 {loader:'css-loader'} ] }, ] } //... }
4.打包生成html文件
-
添加插件（plugin）开发依赖
html-webpack-plugin
npm install html-webpack-plugin@3.2.0 -D -
配置文件
webpack.config.js
//... //引入生成html页面的插件 const HTML_WEBPACK_PLUGIN = require('html-webpack-plugin'); module.exports = { //... plugins:[ //可以指定一个html文件，作为模板，用来创建打包后功能预览页面。 new HTML_WEBPACK_PLUGIN({template:'./public/index.html'}), ] //... }
5.打包图片文件
-
入口文件引入
main.js
//... import example from './asset/img/example.jpg'; let img = document.createElement('img'); img.src = example; let app = document.getElementById('app'); app.appendChild(img); //...模版页面index.html
<!--...---> <div id="app"></div> <!--...---> -
添加loader开发依赖
file-loader
npm install file-loader@5.0.2 -D -
配置文件
webpack.config.js
//... module.exports = { //... module:{ rules:[ { test:/\.(png|jpg|gif)$/, use:['file-loader'] } ] } //... } -
优化
-
添加loader开发依赖
url-loader
npm install url-loader@3.0.0 -D -
重写配置中处理图片文件的rule
webpack.config.js
//... module.exports = { //... module:{ rules:[ { test:/\.(png|jpg|gif)$/, use:[ { loader:'url-loader', options:{ //指定打包后文件名称,与文件存储路径（自动创建文件夹）。[name]原名，[ext]原格式，[hash:8]8位哈希码（避免重命名）。 name:'img/[name][hash:8].[ext]' //超过指定大小的图片参与打包，否则转为base64编码：单位是字节。 limit:1024*4, //超过4kb图片参与打包。 //#url-loader默认采用ES6模块语法规则， //#html-loader采用CommonJS模块语法规则。 //#为了让html模板中直接引入的图片可以正常显示，需要关闭ES6模块语法规则，统一采用CommonJS模块语法规则 esModule:false; } } ] } ] } //... } -
解决模板中图片路径问题。
-
模板页面index.html
<!----> <img src="../src/asset/img/example.jpg"> <!----> -
添加loader开发依赖
html-loader
npm install html-loader@0.5.5 -D -
配置文件
webpack.config.js
//... module.exports = { //... module:{ rules:[ //... //处理html文件中 图片资源 { test:/\.html$/, use:['html-loader'] }, ] } //... }
-
6.将样式从打包后的js中剥离到独立的css文件
-
添加插件（plugin）开发依赖
mini-css-extract-plugin (插件地址)
npm install mini-css-extract-plugin@0.9.0 -D -
配置文件
webpack.config.js
//... const MINI_CSS_EXTRACT_PLUGIN = require('mini-css-extract-plugin'); module.exports = { //... plugins:[ //... new MINI_CSS_EXTRACT_PLUGIN({ //指定文件名称，与文件存储路径（自动创建文件夹） filename:'css/app.css' }), ], //loaders, module:{ //重写配置中处理css文件的rule rules:[ //... { test:/\.css$/, //使用插件中的loader，替换style-loader use:[ { loader:MINI_CSS_EXTRACT_PLUGIN.loader, options:{ //#设置css文件中的引用路径，应与打包后引用的文件路径匹配。 publicPath:'../' } },'css-loader'] } ] } //... }
第二章 webpack与Vue的工程化开发
1.使用webpack-dev-server调试
正常的开发流程应该是项目开发完毕后打包，在开发阶段应该使用webpack-dev-server调试。
-
安装webpack-dev-server开发依赖
npm install webpack-dev-server@3.10.3 -D -
配置文件
webpack.config.js
//... module.exports = { //... //配置 webpack-dev-server devServer: { //端口号 port: 8848, //开启 自动运行调试页面 open:true, }, } -
运行 调试server （webpack-dev-server）
npx webpack-dev-server -
设置简化的调试命令
在package.json中配置
//...json中正常不允许写注释 "scripts":{ "serve":"npx webpack-dev-server" } //...使用方法：npm run
npm run serve
2.vue的render函数（铺垫）
-
render函数渲染模板（template）。
-
render函数把容器当做模板渲染（el‘s outerHTML as template）。
-
手动调用render函数进行渲染。
//... render(h){ //******************请省略以下注释**********************// //#h函数根据 参数 返回虚拟DOM（节点描述信息树） //#h函数 参数1：/*HTML标签名|组件选项对象|resolve返回值为前两者的异步函数*/ //# 参数2（可选）：与模板中属性（attribute）对应的数据对象（详见链接） //# 参数3（可选）：节点内容，（1）字符串（2）子节点数组['字符串节点',h('span','h函数创建子节点'),h(MyComponent,{}/*h函数引用组件创建子节点*/)] //*****************************************************// return h('div'/*标签名*/,this.name+'---'+this.age/*标签内容*/); }, data(){ return { name:'lisi', age:20 } } //...
3.引入VUE
-
安装vue生产依赖
npm install vue@2.6.12 -S -
导入VUE
main.js
//#注意:在工程化的环境中，引入的vue，默认是没有处理模板的功能，需要手动调用render函数，创建虚拟DOM，并展示到页面 import Vue from 'vue';node_modules-----vue（依赖包）-----package.json
//...json文件正常不能写注释 //模块引入的不是完整的vue所以不能渲染模板页面中的容器 "module":"dist/vue.runtime.esm.js" //考虑到模板解析功能占用体积较大，且可以被替换，所以在工程化开发时去除了该功能。 //...综上：所以在工程化开发时需要手动调用render函数进行渲染。（同第2小节第3段）
4.webpack与vue单文件组件开发
1.webpack打包vue文件
-
添加loader开发依赖
npm install vue-loader@15.9.6 -D npm install vue-template-compiler@2.6.12 -D配置文件
webpack.config.js
//... //引入vue-loader,解构出插件 const {VueLoaderPlugin:VUE_LOADER_PLUGIN} = require('vue-loader'); module.exports = { //... //loaders module:{ rules:[ //... //处理vue文件 { test:/\.vue$/, loader:'vue-loader' } //... ] } plugins:[ //... new VUE_LOADER_PLUGIN(), ] //... } -
main.js（入口js文件）
//导入入口组件 import App from './App.vue'; //... //渲染组件 render(h){ return h(App); }, // -
导入路径正确依然报错。
解决方法：配置路径别名
webpack.config.js
//... //引入path模块。nodeJS的内置模块，用于处理路径。 //前文已引入的模块，此后将不再强调 const PATH = require('path'); module.exports = { //... //解析 resolve:{ //别名 alias:{ //_dirname 全局变量返回的当前项目的目录 "@c":PATH.resolve(__dirname,"src/components"), } } //... } -
App.vue（根组件）
<template> <div> <Home></Home> </div> </template> <script> //import Home from './components/Home.vue'; import Home from '@c/Home.vue'; export default { // components:{ Home } } </script> <style> </style>Home.vue（略）
other components etc...
5.webpack 与vue组件Element UI 的使用
-
安装第三方组件库 Element UI 生产依赖
npm install element-ui@2.15.1 -S -
引入组件
main.js
//... import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; //使用ElementUI插件 Vue.use(ElementUI); //...api:Vue.use
-
组件中使用到了字体文件，添加配置，处理字体文件
配置文件
webpack.config.js
//... module.exports = { //... //loaders module:{ rules:[ //... //处理字体文件 { test:/\.(ttf|woff)$/, loader:'file-loader' } //... ] } //... } -
组件的使用（以表格组件为例）
main.vue
1080
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
