前端工程化学习

三件套入门了以后开始学vue,网上说vue新手友好，我感觉其实也不是，用上vue-cli工具简直一脸懵，然后看了vue作者的建议贴尤雨溪: 新手如何入门, 看了以后觉得说应该先把vue放一放，学习一下前端工程化以后再回过头来看可能会好一些，今天是学了前端工程化的第一天，是按照bilibili黑马程序员前端工程化课程学习的,总结今日所学如下：

Step1: 了解Babel

1. babel是一个工具，可以将es6的语法翻译成es5语法
2. 在浏览器中的使用方法为

<script src="browser.min.js"></script>
<script type="text/babel"></script>

3. 在node.js环境中的使用

npm init -y
npm install -D @babel/core @babel/cli @babel/env @babel/preset
npm install -S @babel/polyfill

然后在根目录下添加配置文件 babel.config.js

const presets = [
    ['@babel/env',{
        targets:{
            'chrome': '67',
        }
    }]
];
module.exports = {presets};

最后就可以通过npx babel-node **.js命令来编译es6语法啦～

Step2: 了解ES6模块化

1. 模块化原因：文件之间的相互关联复杂, 命名冲突问题的存在, 模块化可以使得代码复用
2. es6规范之前的模块化规范
   在es6模块化规范之前，浏览器端的模块化规范为amd, cmd(具体是什么我不知道～)；服务器端使用commonjs规范

const ** = require('****') //引入模块
module.exports = { };//暴露模块

3. es6统一了两个环境下的模块化方案
   当下：es6模块化和commonJS会被使用
4. es6模块化语法：

import ** form '' //默认暴露方式下的引入模块
import {** as ***, **, **} form '' //按需暴露方式下的引入模块
import '**.js'//并不引入模块，而是直接执行js文件
export default{
}//默认暴露
export let a = 1;//按需暴露

Step3: Webpack的使用–基础

1. webpack是什么？
   一个前端项目的构建工具（用于打包）
2. 使用方法和一般流程
   2.1 npm init -y
   2.2 npn install -D webpack webpack-cli webpack-dev-server html-webpack-plugin
   2.3 编写webpack.config.js文件
   2.4 在package.json中的script属性中加入
   2.5 在命令行中 npm run dev/ npm run devServe

// package.json "script"中
"dev":"webpack",
"devServe":"webpack serve --port 1010 --open"

// webpack.config.js
var path = require('path');
var htmlPlugin = require('html-webpack-plugin');
var htmlWebpackPlugin = new htmlPlugin();
module.exports = {
	mode:'development',
	entry:path.join(__dirname,'./src/index.js'),
	output:{
		path: path.join(__dirname,'./dist'),
		filename: 'bundle.js'
	},
	plugins:[htmlWebpackPlugin],
}