webpack与vue的关系——webpack学习笔记1

什么是webpack?

• webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；

webpack能做什么（为什么要用webpack）?

• 代码转换：比如浏览器识别不了xx.vue文件，或者xx.ts文件，webpack将其转化成es5的xx.js文件，浏览器遂能识别，并进行渲染。
• 文件优化、模块合并、自动刷新(热更新）、代码校验、自动发布

webpack的使用

安装方法一

• 1.运行npm i webpack -g全局安装webpack（全局安装只要电脑系统没有bug或系统重装外，以后都不需要再安装）
• 2.再安装npm install webpack-cli --g（webpack4.0需要安装），这样就能在全局使用webpack的命令

安装方法二

• 在项目根目录中运行npm i webpack --save-dev和npm install webpack-cli --save-dev安装到项目依赖中，并且是开发环境用,生产环境用的是打包后的代码，用不到webpack

webpack原始打包运行方式

• webpack 会去项目的根目录下寻找webpack.config.js配置文件，用其中的配置打包，默认只能打包js
• 如果没有webpack的配置文件，会用默认条件打包，项目打包入口默认./src/index.js，出口默认根目录下的./dist/main.js
• webpack --config 配置文件名 (配置文件名不能是webpack.js，会导致webpack的命令是进入webpack.js文件)

无配置文件运行webpack

E:\my>webpack
Hash: 1acf1ac3a7236ec3a4b6
Version: webpack 4.41.4
Time: 187ms
Built at: 2019-12-27 15:03:17
  Asset（出口）       Size  Chunks             Chunk Names
main.js  946 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 18 bytes {0} [built] // 打包入口

// 运行webpack,不配置其他，会默认去项目根目录下的src目录下的index.js文件为入口。
// 所以如果没有配置文件，也要创建src/index.js为项目打包入口
// 项目出口，默认根目录下的dist文件夹下的main.js
// 现在如果想浏览器解析node中语法，必须在html中引入打包后的main.js文件

有配置文件运行webpack

E:\my>  webpack --config webpack.name.js // 可以修改默认的webpack.config.js的配置文件名称
  为了简便在package.json文件中配置命令（脚本）
   "scripts": { // 脚本
    "server": "webpack --config webpack.name.js" 
    //当运行npm run server的时候等同于运行了webpack --config webpack.name.js 命令
  },

有配置文件在vue中运行webpack

• 运行npm run server 就是运行webpack-dev-server
• 可以理解为webpack-dev-server是webpack的运行插件
• 运行webpack-dev-server其实运行了webpack.config.js里面的devServer：{}的配置

1.安装：npm i webpack-dev-server -D
2.需要在package.json中的脚本中去配置
 "scripts": {
    "server": "webpack-dev-server"
  }
  3.在配置文件中配置：例如在：webpack.config.js
  module.exports = {
// 运行webpack-dev-server后，生成的内存包是整个项目，并且默认首页显示是项目目录
    devServer:{ //开发服务器配置（或者说本地服务器配置）
        port:3000,//指定本地服务器端口
        progress:true,//有打包的进度条
        contentBase :'./src', // 指定打包的基础路径，src为根路径打包，也就是只打包src里面的文件
        compress:true //智能压缩
},
  
}