前言
我们知道前端或者软件开发的工作流。一般要经历以下步骤:
- 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
