关于webpack配置

webpack

作用：

1. 优化：工程化。vue，react cli
2. 打包：将多个文件进行压缩，打包成一个文件。带宽
3. 转换：es6和es7转换成e5,ts,jsx,less,sass

达到效果：

1. 可以通过webpack对公司现有的项目进行从0开始的搭建
2. 可以对vue、react脚手架进行添加与修改的操作。
3. 了解webpack当中的一些原理、流程

webpack结构：

1. 入口：entry
2. 出口：output
3. 插件：plugins
4. 运行dev/serve
5. 转换：loades
6. module
7. mode：模式 ---> 开发模式   生产模式
> 开发环境（development）：编写代码的位置，可以用到一些断点
> 生产环境（production）：打包后将代码放置到服务器所属的环境上

上手。打包。配置

0配置概念：不需要额外的进行配置 --> 默认配置项src下面的代码打包到了dist下面的main.js中

第一步：

1.1 安装：

webpack : webpack的核心板块
webpack-cli ：来执行webpack相关的命令行

npm install webpack webpack-cli -g

webpack -v 查看版本号

1.2 打包 (进入主文件夹)默认是生产环境：

webpack

由此可生成一个dist文件夹 dist就为生产环境

指定打包模式 –mode development

webpack --mode development

指定文件夹打包** src/**

webpack src/one.js --mode development

修改输出的文件名字或地址 –output

src文件夹下面的one.js和two.js打包到名为haha.js中

webpack src/one.js src/two.js --output haha.js

第二步进阶：

1.1 package.json

(在项目的根目录中增加该文件)(一般npm init -y生成)：

{
    "scripts":{
        "buildwebpack src/one.js src/two.js --output haha.js --mode development"
    }
}

npm run build 进行打包

1.2 webpack.config.js

webpack的配置文件
webpack基于node，首先要有node环境

module.export = {
    mode : "development", // --mode
    entry:"./src/mo.js", //指定入口文件/指定你想打包的文件（不是一般的直接把src文件夹下面的都打包）
    //出口文件 是对象的形式
    output:{
        //filename:"haha.js",//指定你要打包的文件名,默认在dist文件夹里面
        filename:"my/haha.js",//指定你要打包的文件名,创建进去到dist文件夹下面的my文件夹里面
        path:"" //绝对地址   相对地址./
    }
}

最近出了一些状况 后续会继续补充哒~