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

文章目录

  • 什么是webpack?
  • webpack能做什么(为什么要用webpack)?
  • webpack的使用
    • 安装方法一
    • 安装方法二
  • webpack原始打包运行方式
    • 无配置文件运行webpack
    • 有配置文件运行webpack
    • 有配置文件在vue中运行webpack

什么是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 //智能压缩
},
  
}

你可能感兴趣的:(webpack)