Webpack学习笔记

一、为什么要使用Webpack？

• 新建一个前端工程，新建(mian.js和bar.js文件)
  

• index.html中采用传统引入js文件的方式

  <script src="./src/main.js"></script>
  

• bar.js采用ES6的语法导出一个默认成员，在main.js中导入bar.js中的的匿名函数的打印功能

  bar.js

  /* 
  	使用模块化的前端编程思想，
  	独立的js文件看作一个模块，一个模块只能导出一个默认成员，
  	可以导出无限制个一般成员
  
  	使用es6模块语法
  	export default 表示导出默认成员，这里是导出了一个匿名函数
  
  	导出匿名函数
  	export default function(){}
  	导出对象
  	export default {} 
  */
  export default function(){
  	console.log('我是bar.js模块的打印！！！')
  }
  

  main.js

  /* 
  	导入bar.js模块 
  	.js一般省略
  	import 别名 from '路径'
  */
  import bar from './bar'
  /* 执行bar.js模块中的匿名函数*/
  bar()
  

• 执行，会发现浏览器报错，这是因为浏览器不支持模块化编程思想
  Uncaught SyntaxError: Cannot use import statement outside a module

• 因此，需要引入Webpack（支持模块化编程思想的打包管理工具）

二、Webpack基本使用

1.什么是Webpack?

Webpack 是⼀个前端的静态模块资源打包⼯具，能让浏览器也⽀持模块化。它将根据模块的依赖关系进⾏静态分析，然后将这些模块按照指定的规则⽣成对应的静态资源。

2.Webpack的作用

• Webpack的核⼼是进⾏Js资源的打包⼯作
• 可以将多种css、png、sass⽂件合并为⼀个静态⽂件，减少⻚⾯的请求
• 可集成babel⼯具实现ES6转ES5⼯作，解决不同浏览器的兼容性问题
• 可集成各种http服务器
• 可以实现模块的热加载，当代码发⽣改动⾃动刷新浏览器
• Webpack2.x版本完全颠覆了1的很多设置，不再推荐使⽤1，很多时候我们使⽤的3或者4版本，都属于Webpack2.x版

3.Webpack基本命令

• npm i -D webpack@4.35.2
  Webpack推荐安装到开发到devDependencies开发依赖中，因为Webpack只是⼀个打包⼯具，项⽬如果需要上线，上线时打包的结果，⽽不是这个⼯具，打包过程仅仅存在在开发阶段中
• webpack -v 查看webpack版本号
• webpack 构建打包（会根据webpack.config.js中设置的⼊⼝打包，在设置的出⼝⽣成打包好的⽂件）
• webpack --watch 自动打包构建，当修改文件之后自动打包，ctrl+c退出

注意：以上命令在webpack和webpack-cli全局安装时可直接使用，但局部安装时，需要部署在package.json文件中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "show": "webpack -v",
    "build": "webpack",
    "watch": "webpack --watch",
    "serve": "webpack-dev-server --open"
  },

在执⾏时输⼊
npm run show 版本号
npm run build 编译打包
npm run watch 自动打包构建
等同上面的命令

4.常用插件

• style-loader:将css装载到Javascript
• css-loader:让Javascript可以解析CSS

命令: npm i -D style-loader css-loader

• file-loader:将图⽚资源进⾏打包

命令: npm i -D file-loader

• Html-webpack-plugin:将index.html⽂件打包到bundle.js所在⽬录，并且自动引⼊bundle.js

命令:npm i -D html-webpack-plugin

• vue-loader:加载vue⽂件
• vue-template-compiler:解析vue组件模板

npm i -D vue-loader vue-template-compiler

5.添加模块热替换(HMR)

• 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有⽤的功能之⼀。模块热替换⽆需完全刷新⻚⾯，局部⽆刷新的情况下就可以更新。

// 1. 导⼊webapck, 热模块加载HMR
const webpack = require(‘webpack’)
// 实时重新加载
devServer: {
// ⽬标路径
contentBase: ‘./dist’,
// 2. 开启热模块加载HMR
hot: true
},