【无标题】

webpack浅析1

概念

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有的这些模块打包成一个或多个bundle

安装

1. 首先确保安装有nodejs。
2. 搭建项目文件环境。
3. 然后安装。
   
   

使用

webpack依赖webpack.config.js打包

webpack.config.js内部参数

module.exports={
    entry:'./src/index.js',//入口，从哪个文件开始运行
    output:{
        path:__dirname+'/dist',//目录
        filename:'main.js',//打包好的js文件名称
    },
    mode:'production',//产品环境 也可以是development（开发模式）
 }
 //打包流程 webpack 拿到/src/index.js,打包输出到dist/main.js

如果想要打包css文件，就要下载 css-loader和style-loader，并且配置module参数

  mode:'production',//产品环境 也可以是development（开发模式）
  module：{
      //规则
      rules：[
       //当遇到.css结尾的文件，使用style-loader与css-loader
        {"test":/\.css/,use:["style-loader","css-loader"]}
        ]
  }

运行命令
初始打包命令 npx mypack 。
可以配置package.json参数，转换打包命令为npm run build，在scripts里添加build参数:
"scripts":{"build":"webpack","test":"echo \"Error:no test specified\" && exit 1"}

总结

再接再厉