0-1搭建项目

目标：搭建一个基于vue框架的项目

涉及相关技术：vue框架、webpack及插件、eslint、babel等

项目结构

|-build
|-dist
|-src
 |-index.js
|-index.html
|-eslint.ts
|-package.json

1、package.json文件

作用：为保证项目正常运行，一个项目都会有一个packags.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息。

生成方式：通过yarn init 可以自动生成package.json文件，同时也可以通过手动加入。

以下是一个简单的package.json文件，详细配置参考。接下来只针对核心的配置详细进行讲解。

{
    "name": "webpack",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "start": "node index.js",
        "build": "node build.js"
    },
    "dependencies": {},
    "devDependencies": {},
    "author": "zhangmengyi <zhangmengyi@meituan.com>",
    "license": "MIT"
}

1.1 scripts

scripts 指定了运行脚本命令的npm命令行缩写，比如：设置start的指令即在控制台执行yarn start时，将要执行的命令。

例如：

yarn start 

等同于执行

node index.js

常用package.json文件，设置的快捷方式有：

"scripts": {
        "start": "node index.js",
        "build": "xxx",
        "dev": "xxx",
        "lint": "xxx",
    },

1.2、dependencies与devDependencies

dependencies和devDependencies对象包含应用依赖哪些包文件。例如：

"devDependencies": {
	"webpack": "^5.1.3",
	"webpack-cli": "^4.0.0"
}

dependencies的作用是：应用在生产与开发过程中都会依赖的包

devDependencies的作用是：应用在开发过程中依赖的包，生产环境不会安装

所以，假设有一个公共组件，依赖vue框架进行开发实现，yarn add vue --dev 安装vue包文件通过--dev将其放在devDependencies，避免和业务方使用时vue版本的冲突。

2、webpack

2.1 安装

控制台执行：yarn global add webpack webpack-cli webpack-dev-server

执行后，在本地node_modules引入webpack和webpack-cli包文件，并且写入package.json的devDependencies配置中，如下：

 "devDependencies": {
    "webpack": "^5.1.3",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
},

2.2 文件打包

需求：通过命令yarn build将文件index.js打包，并且打包后的文件输出到dist目录下。

步骤一：通过命令执行打包

步骤二：输出打包后文件放置在dist目录下

借助package.json配置文件的scripts配置，实现yarn build执行webpack-cli命令，间接实现文件index.js打包功能，此处存在两种配置方式：

1 格式：webpack [--config webpack.config.js]

配置：

scripts: {
	"start": "webpack --config webpack.config.js"
}

其中可在应用中增加webpack.config.js文件，例如：

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        build: './src/index.js',
    },
    output: {
        path: path.join(__dirname, "../dist"),
        filename: '[name].[hash].bundle.js'
    }
}

通过以上配置，执行yarn build后，会在dist文件下生成bundle文件：

注意：此处打包后的bundle.js文件输出的路径是通过path.join指定的，此处注意与path.resolve()的区别。__dirname表示当前文件所在的目录build，dist与build目录在同级，所以在使用join时，需要通过../向上回一级。

2 直接指定文件入口和文件输出

格式：webpack <entry> [<entry>] -o <output>

配置：

scripts: {
	"start": "webpack ./src/index.js -o ./dist/bundle.js"
}

通过yarn start 执行打包后，index.js打包文件放置在dist/bundle.js下：

注意事项：

• chunk与bundle关系

• 打包后文件名自定义：filename中[name]值是entry的key值。 上述文件为main.js，原因是entry将入口文件的key设置为main，此处可以通过修改entry的key值，自定义输出文件的[name]。

2.3 js编译

配置 ES6/7/8 转 ES5代码，此处需要通过babel进行编译

2.4 css编译

2.4 eslint编译

2.5 tslint编译