webpack-01

背景：

       Javascript工程项目越来越大，如果采用原来在使用<script>标签引入的js文件，会非常的麻烦。于是js工程师开始考虑使用模块的概念，编写各个模块通过打包工具（webpack,vite等）将这些模块进行组装。Webpack就是其中一个很出色的模块打包工具。

使用：

       1、初始化项目 npm init，会生成一个package.json文件，其中的内容相当于npm的说明书，记录项目名称 版本和仓库。

      2、npm安装 webpack 和webpack-cli

       webpack 是webpack核心，webpack-cli 是webpack的命令行工具，装了它就可以使用npx 命令了。

       3、webpack命令打包命令，和简化方法

npx webpack --entry = ./index.js --mode=’development’

       --entry指定打包其实模块，告诉webpack从这个文件开始组合模块

      --mode 告诉webpack是开发环境打包还是生产环境打包。此外还有生产环境关键字 production

       简化：每次打包如果都输入上面那么长的命令，会很麻烦，那么可以使用scritps脚本来简化命令。 在webpack.json中添加一个

'scripts':{
    "build":"webpack --entry=./index.js --mode='development'"
}

此时就可以使用 npm run build 代替之前一长串的命令

4.webpack.config.js文件（webpack配置文件）

        为什么叫webpack的配置文件？因为一个项目webpack的配置项可能会有很多，如果还在webpack.json中的命令中添加参数，后续会非常难以维护。因为webpack.config.js配置文件就应运而生，我们可以将命令行参数在这个文件中维护。

module.exports={
    entry:'./src/index.js'，
    output:{
        filename:'main.js' // 输出文件名
    },
    mode:"development" // 
}

 此时webpack.json文件中命令行可以改为 

'scripts':{
    "build":"webpack"
}

注：webpack打包默认入口文件为 scr/index.js，打包后的文件路径为 dist目录

此时运行，npm run build
 5、webpack-dev-server简化开发时的打包工作。

        在此之前没完成一个或者一段代码编写，调试前都得调用执行一次npm run build 这样挺繁琐。为了解决这个问题，社区提供了webpack-dev-server,在开发阶段开发者不用打包就能调试自己代码。

在webpack.json中配置命令

"scripts":{

    "build":"webpack",
    "dev":"webpack-dev-server"

}

还需要再webpack.config.js中配置开发服务

module.exports={
    entry:'./src/index.js'，
    output:{
        filename:'main.js' // 输出文件名
    },
    mode:"development", // 
    devServer:{
        publicPath:'/dist' // 开发者服务器会从dist中拿资源
    }
}

webpack-dev-server 打包存在于内存中。