2021-03-22

初步学习webpack,构建简单项目，实现基本打包

https://webpack.docschina.org/（webpack中文网站）
它对webpack的定义是：本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
webpack的作用
1.代码压缩打包（css/html/javascript）；
2.语法的转换（例如es6转es5）；
3.提供开发环境（自开启浏览器、热更新等）；
（欢迎补充）
webpack是现在最流行的模块打包工具，优点是可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求（模块化）。
webpack的基本打包配置演示
1.新建文件打开PowerShell并执行下面命令初始化

cnpm init -y

2.安装依赖包（推荐全局安装）

npm install -g webpack webpack-cli -D

3.开发工具中打开项目 到package.json文件中, 配置scripts

 scripts: {

       "build": "webpack --config webpack.config.js"
   }

4.文件根目录下新建 webpack.config.js文件 并在里面配置以下内容

//配置
const path = require('path') //引入路径

module.exports = {
    // entry: 配置入口文件 (从哪个文件开始打包)
    entry: './src/main.js',

    // output: 配置输出 (打包到哪去)
    output: {
        // 打包输出的目录 (必须是绝对路径)
        path: path.join(__dirname, 'dist'),
        // 打包生成的文件名
        filename: 'bundle.js'
    },

    // 打包模式 production 压缩/development 不压缩 开发环境
    //production生产环境 
    mode: 'development'
}

5.根目录下建立src文件夹 在里面建立入口文件main.js

6.在入口文件中写入代码后可使用以下命令打包

 npm build

7.打包完成后发现新文件dist 打包成功