1.webpack的基本使用

webpack的基本使用

1、什么是？
前端项目工程化的具体解决方案

主要功能：提供前端模块化开发支持，以及代码压缩混淆、处理浏览器端javascript的兼容性、性能优化等强大功能。

2、创建列表隔行变色项目

3、在项目中安装webpack

在终端运行如下的命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

-S 是—sava的简写 （要上线 完成）
-D 是—sava-dev的简写 （开发阶段）

4、在项目中配置webpack
①在 项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：

module.exports= {
mode: ‘development’ //mode用来指定构建模式 可选值有development（开发阶段）和 production（要上线）
}
② 在package.json的scripts节点下，新增dev脚本如下：
“scripts”: {
“dev”: “webpack” //script 节点下的脚本，可以通过npm run 执行，例如 npm run dev
}
③在终端中运行npm run dev命令，启动webpack进行项目的打包构建

4.3 webpack中的默认约定
在webpack 4.x和5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为src ->index.js
②默认的输出文件路径为dist ->main.js
注意：可以在webpack.config.js中修改打包的默认约定

4.4自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。
示例代码如下：

constpath=require('path') //导入node.js中专门操作路径的模块
module.exports= {
    //mode用来指定构建模式 可选值有development和 production
    mode: 'development',
    //entry:'指定要处理哪个文件'
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
    //指定生成的文件要存放到哪里
    output: {
        //存放到目录
        path: path.join(__dirname, 'dist'),
        //生成文件名
        filename: 'bundle.js'
    }
}