Webpack打包

一、Webpack

1、webpack 是什么？有什么用？有哪些同类工具？

（1）WebPack是一个前端资源打包，可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，vue等），并将其打包为合适的格式以供浏览器使用。

因为webpack默认只认识js模块，其他的模块都需要相应的loader或plugins插件来解析

（2）用途

构建单页应用（disk）
代码压缩

（3）同类工具

fis3
grunt
gulp

2、webpack安装步骤（https://www.webpackjs.com）

-g：全局安装
--save-dev：添加到当前目录的package.json 文件 devDependencies 键下

（1）安装node.js（node.js提供了npm）

（2）安装淘宝镜像

npm config set registry http://registry.npm.taobao.org/

（3）安装打包工具

npm i webpack -g

（4）安装打包配套工具

npm i webpack-cli -g

3、node.js模块系统

（1）导出：module.exports = 导出内容

        const cat = {
            name: '白猫',
            color: 'white'
        }
        module.exports = cat;

（2）导入：require( ' 文件路径 ' )

       const dog = require( './dog.js' );
       console.log(dog.name);

（3）打开终端运行：node index.js，查看是否正常输出

二、Webpack的核心的概念

1、入口和出口

entry：入口：告诉webpack从哪里开始打包
output：出口：输出的文件路径以及文件名

2、模式（环境）mode

开发环境：development（不压缩代码）
生产环境：production（压缩代码），一般默认压缩代码

3、loader：加载器（解释器）

webpack默认只认识js模块，其他的模块都需要相应的loader来解析

4、plugins：插件

安装html-webpack-plugin插件

5、dev-server

能够实时更新页面，边看边改
- （1）安装：npm i webpack-dev-server -g
- （2）配置devServer
- （3）运行命令： webpack-dev-server
- （4）配置启动命令：npm run (dev) ，dev是根据自己的命名
在package.json文件的scripts配置：

配置启动命令npm run dev.jpg

6、alias别名：例如@代替src

5、alias别名配置.jpg

代码整体思路：

（1）新建文件夹
（2）初始化package.json
- npm init -y
（3）创建入口文件（一般命名main.js）
- 一般用于导入css，js文件相关联等等
（4）创建webpack.config.js用于配置打包
（5）导入path（node.js自带的模块，用于处理路径相关联）
（6）配置入口（entry）与出口（output）文件

        entry: '入口文件路径',
        output: {
               //出口路径，__dirname：当前目录，'dirst'：所存放的文件夹
             path: path.resolve(__dirname, 'dirst'),
             filename: 'Grayly.js'  // 生成的文件名
        },

（7）mode：模式配置（开发的环境）
- development或production
（8）loader配置
- 安装css-loader：npm i css-loader --save-dev
- 安装style-loader：npm i style-loader --save-dev（因为css-loader依赖styke-loader）
（9）安装plugins插件
- 安装html-webpack-plugin插件：npm i html-webpack-plugin --save-dev
（10）导入html-webpack-plugin模块

   //导入html插件
   const HtmlWebpackPlugin = require('html-webpack-plugin')

（10）配置plugins插件

    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' })  //html文件的路径
    ]

（11）为npm包目录创建软链接
- 安装：npm link webpack --save-dev

完整代码

/**
 * 配置文件
 */

//1、导入path
const path = require('path');
//导入html插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

//2、配置入口与出口
module.exports = {
    //配置入口文件，告诉webpack从哪里开始打包
    entry: './main.js',  //入口文件路径

    //配置出口
    output: {
        //出口路径，__dirname：当前目录，'dirst'：所存放的文件夹
        path: path.resolve(__dirname, 'dirst'),
        filename: 'Grayly.js'  // 生成的文件名
    },

//3、模式（环境）：开发环境：development（不压缩代码），生产环境：production（压缩代码）
    mode: 'development',

    //4、loader：加载器（解释器）
    module: {
        rules: [
            {   // 识别规则
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },

    //5、plugins插件
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html' })
    ]
}