webpack图解-学习笔记

文章目录

webpack图解-学习笔记
webpack与vuecli关系
为什么要打包？
什么是webpack?
webpack-dev-server
手动配置文件
把打包后的js文件整合到html中
项目发布

webpack图解-学习笔记

webpack与vuecli关系

vuecli基于webpack建构的，有一些配置还需要直接使用webpack的配置项
要完全掌握vuecli，必须掌握webpack
vuecli的配置项较少，若要使用webpack的配置项，则要用configureWebpack
vuecli启动项目，实际上启动的是webpack-dev-server

为什么要打包？

项目分2种：企业级项目，互联网项目
企业级项目：jsp, asp, (写好页面，引入js,css,img)完了直接部署
互联网项目：尽量减少加载时间，提高用户体验，需要打包
打包：文件压缩(注释，代码压成一行)

什么是webpack?

打包工具还有gulp grant
从项目入口文件开始，装载转换所有文件，优化处理文件，生成最终发布文件
重要概念：入口(main.js)，出口(dist)，装载器loader，plugin.
生成package.json npm init -y
cnpm i -S webpack webpack-cli(可通过命令行操作)
零配置：没有webpack.config.js依然可以打包
webpack4可以使用零配置不用配置文件webpack.config.js
若指定了webpack.config.js文件，就不会再使用零配置
npx: 可以直接运行node_modules中的包
npx webpack 或
package.json中加"dev": "webpack-dev-server"
然后直接npm run dev
webpack默认可以打包压缩项目，零配置

//package.json
{"name": "01","version": "1.0.0","description": "- vuecli基于webpack建构的，有一些配置还需要直接使用webpack的配置项\r - 要完全掌握vuecli，必须掌握webpack","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","dependencies": {"webpack": "^4.43.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"},"devDependencies": {"html-webpack-plugin": "^4.3.0"}
}

webpack-dev-server

把前端当作一个http容器访问前后分离标志
cnpm i -S webpack-dev-server
启动前端服务：npx webpack-dev-server
根目录

手动配置文件

webpack: webpack.config.js
vuecli: vue.config.js 官网链接：https://cli.vuejs.org/zh/

webpack.config.js文件

//自定义webpack
let path = require('path'); //path node
let HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {  //node模块化的写法entry: "./src/index.js",  //入口mode: 'development',  //开发 发布productionoutput: {                 //出口filename: "index.js", //指定输出名字//node __dirname 当前目录path: path.resolve(__dirname, "dist")  //指定输出目录},devServer: {  //web服务配置port: 8081,open: true,  //服务启动时自动打开默认浏览器progress: true, //进度条contentBase: './dist'  //http容器的根目录},plugins: [new HtmlWebpackPlugin({template: './src/index.html', //模板filename: 'index.html',       //打包后模板名字})]
}

把打包后的js文件整合到html中

手动添加<script src="./index.js"></script>
html-webpack-plugin作用：将打包后的js自动添加到html

项目发布

npm i -g serve
serve dist

webpack图解-学习笔记相关推荐

webpack入门学习笔记10 —— 在项目中使用图片资源
1. 写在前面在前端项目中,图片是必不可少的一种资源.在使用图片的时候,我们可以有以下几种方式: 在 .html 文件中,通过 <img src="" alt=" ...
算法图解学习笔记02：递归和栈
计算机内存原理要说递归和栈的问题,首先就要说下计算机内存的基本原理.简单理解计算机内存原理可以将一台电脑看作超市的存包柜,每个柜子都有柜号(即计算机中的地址,如0x000000f).当需要将数据存储 ...
算法图解学习笔记01：二分查找大O表示法
二分查找二分查找又称折半查找,其输入的必须是有序的元素列表.二分查找的基本思想是将n个元素分成大致相等的两部分,取a[n/2]与x做比较,如果x=a[n/2],则找到x,算法中止:如果x<a[ ...
算法图解学习笔记02之选择排序
package 第二章;import java.util.Arrays;//找出列表中最小(大)的,放入新列表(O(n)),再次找 public class SelectionSort {public ...
算法图解学习笔记01之二分查找
不知道可以学到第几章,就不立flag了,容易倒你要学会的不是写算法而是何时何地用何算法 package 第一章; //数组有序,要求快速查找出数据 public class BinarySearch ...
算法图解——学习笔记
文章目录算法简介 **第二章选择排序** 数组与链表排序算法算法简介算法:一组完成任务的指令,任何片段都可以视为算法. 第一章算法集合: 算法种类定义二分法一种查询方法,通过将查找特 ...
Webpack4 学习笔记 - 01：webpack的安装和简单配置
安装 webpack 新建一个Demo文件夹,执行初始化: npm init 在Demo文件夹里安装 webpack 和 webpack-cli : npm install webpack webpa ...
ReactJS学习笔记——npm、JSX、webpack
2019独角兽企业重金招聘Python工程师标准>>> #ReactJS学习笔记--npm.JSX.webpack [toc] React是一个JavaScript库文件,使用它的目 ...
webpack：js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理依赖包降级处理 ...

webpack图解-学习笔记

文章目录

webpack图解-学习笔记

webpack与vuecli关系

为什么要打包？

什么是webpack?

webpack-dev-server

手动配置文件

把打包后的js文件整合到html中

项目发布

webpack图解-学习笔记相关推荐

最新文章

热门文章