webpack学习笔记.md

前言
我们知道前端或者软件开发的工作流。一般要经历以下步骤:

• 1.搭建项目结构、
• 2下载安装依赖、
• 3.编码实现、
• 4.性能优化、
• 5.项目上线。

这其中有很多步骤是重复的，可以自动化实现的，为了解决这个问题，基于各种业务功能开发出了对应的工具`：

• 编译类
  编译类开发工具主要用来解决浏览器对于es6的识别问题，它把es6规范的代码编译为符合es5规范的文件，在浏览器上运行。代表为babel
• 打包类
  为了减少http请求数，尽快的加载页面，我们需要把多个js文件打包成一个直接使用，代表为browserify
• 测试类
  • 单元测试
  • 集成测试
  • 压力测试

---

webpack

基于业务需求的所实现的各种工具，只能解决某一个问题，但是也存在着严重的缺点，1.需要安装多个工具；2.文件之间无法相互引用。于是webpack应运而生。

安装及使用

npm install webpcak -g
webpack -v //检查版本号，如果出现证明安装成功
wepack  //使用webpack
webpack --config 'xxx' //如果我们更改了webpack.config.json文件夹，就需要使用这中执行方式

配置webpack

对webpack的配置在webpack.config.中完成,在此之前，我们先学习下es6模块化相关知识。

es6模块化
在node中，我们使用require来引用一个文件；使用modelu.exports导出一个模块。在es6中使用export和import两种方式来实现

//1.使用export将整个文件作为模块被导出
export default  a = 2;
export default sum(){

}
// 对应引用方法
import a from './xxx'
//-------------------------------
// 2.按需导出
export let a = 3;
export let b = 4;
export function sum(){
}
// 使用这种方式要先给导出的的数值起一个名字
// 对应的引用方式
import {a,b} from './xxx'

webpack配置

webpack的配置在webpack.config.json中完成，但是在这个文件中，我们需要使用node的导入导出方式，因为这个文件不会被编译和解析。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

多入口配置方式

const path = require('path');

module.exports = {
  entry: {
    index: './src/index.js',
    filename: './src/filename.js'
  },
  output: {
    filename: '[name]bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

打包示例

babel-loader
安装依赖

npm install babel-loader babel-core babel-preset-env --save-d

babel-loader配置.png