前端构建_webpack

webpack 是什么？

webpack是一个前端模块化打包工具指（由于模块化开发，所以需要打包，这里所说的模块化开发主要指JS)

由于现代前端应用程序越来越复杂，需要采用模块化进行开发，但浏览器还未支持模块化开发，所以webpack才诞生

webpack默认只支持js的模块化（CommonJS/ES6/AMD），如果需要把其他文件（css/图片等）也当成模块引入，就需要相对应的loader解析器

现代前端

• 挂载点

传统前端的挂载点：html入口文件 （无论是js、css还是图片等资源都统一由html文件管理和调度）

现代前端的挂载点：js入口文件 （无论是js组件、css还是图片等资源都统一由js文件管理和调度，html文件作为模板）

• 模块化与打包工具

传统前端：都是多页面应用，无模块化概念，因此无需打包工具

现代前端：可以是单页面应用，也可以是多页面应用，有模块化概念，由于历史原因，很多浏览器还不支持模块化，故出现打包工具

• 导入模块资源

传统前端：在html文件，导入css资源使用<style>或<link>，导入js资源使用<script>，导入图片资源使用url()或者<img src="">

现代前端：在js中导入资源，使用import，在css中导入css资源，使用@import

安装

• webpack

使用NPM进行安装，有2种方式：全局安装、局部安装（局部又分为生产局部安装和开发局部安装）

全局安装： npm i -g webpack

局部开发安装： npm i -D webpack  // （推荐此）JS应用在生产环境上不需要webpacke,所以无需使用生产局部安装

局部安装的项目，会在当前项目中node_module中，不会污染全局

• webpack-cli

v4.0.0之后，除了要安装webpack，还需要安装webpack-cli

局部开发安装： npm i -D webpack-cli

配置

• 默认配置

在应用根目录下，定义webpack.config.js文件

执行webpack时，直接在命令行输入webpack (会默认寻找webpack.config.js配置文件)

• 自定义配置

在应用根目录下，自定义webpack.config.dev.js文件

执行webpack时，直接在命令行输入webpack --config webpack.config.dev.js

如果把webpack.config.dev.js配置文件放在根目录下的文件夹里呢？

• 最简单配置 —— 打包JS模块

const path = require('path');

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

插件

• 简单创建 HTML 文件，用于服务器访问

所有打包好的JS文件，都要有一个html文件来引入，否则浏览器无法浏览，这个功能就是webpack插件HtmlWebpackPlugin功能

1、安装
npm install --save-dev html-webpack-plugin

2、在webpack.config.js文件中配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development'
};

服务器 for dev

webpack提供了一个用于开发使用的服务器：webpack-dev-server，前端应用开发，需要一个调试开发服务器来看即时效果

• 安装

npm install webpack-dev-server --save-dev

• 配置

1、配置执行服务器命令
在package.json中，配置
"scripts": {
    "sdev": "webpack-dev-server"
}
*****注意：默认服务器是读取webpack.config.js文件，如果自定义了，需要加上--config webpack.config.dev.js*****

2、在webpack配置文件中配置
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'main.html'
        })
    ],
    mode: 'development',
    devServer: {
        open: true,  // 自动开启
        contentBase: path.join(__dirname, 'dist'),
        index: 'main.html'
    }
};

• 执行原理

执行webpack，根据配置文件，会生成打包后的文件（硬盘）
执行webpack-dev-server，根据配置文件，会生成打包后的文件（内存），并启动服务器

Babel 语法转换

Babel 是一个 NodeJS的独立应用，用于把ES2015/ES2016/ES2017/React转换成ES5

用法：
1、在浏览器中使用
2、webpack打包中使用 （以下主要讲解这种方式）
3、命令行直接使用

• 安装

npm install -D babel-loader @babel/core @babel/preset-env

CSS 引入

在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader

import（导入）是ES6 Module的模块化语法，与export（导出）是一对对应的技术，所以 *ES6 所说的导入都是导入 JS 文件*，而这个JS文件一般会有导出语法

• 问题：为何webpack中能使用ES6 import语法导入CSS文件？

其实ES6 import语法没有规定一定要导入JS文件，但如果你导入的是非JS文件，运行时会报错的

webpack借用了ES6的导入/导出语法，本身就支持导入JS文件
如果需要转ES5，需要额外配置一个loader

不同的是:
webpack还支持导入别的文件（图片、css、less等），语法也是借用了ES6的导入/导出语法，需要额外配置一个loader

• 安装

npm i style-loader css-loader -D

• 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html'
        })
    ],
    devServer: {
        open: true,
        contentBase: path.join(__dirname, 'dist'),
        index: 'index.html'
    },
    module:{
        rules:[{
            test:/\.css$/,
            use: ['style-loader', 'css-loader']  //执行loader的先后顺序是从右到左，必须先执行css-loader
        }]
    }
};

理解 ['style-loader', 'css-loader'] 执行顺序，就相当于 styleLoader( cssLoader( fileSource ) )

• css-loader

主要用于把.css文件的内容中@import/url()转成js的导入语法import/require并执行，输入的是.css文件内容，最后经常css-loader加载器处理后，得到的是css代码字符串

• style-loader

主要用于把css-loader处理后的css代码字符串添加到页面head内<style>中，但是通过js动态添加进去的