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' })
    ]
}