2.webpck进一步详细说明

转载自:  https://www.jianshu.com/p/6712e4e4b8fe

1. npm install webpack webpack-cli webpack-dev-server -g 

2. 终端 CD到项目文件夹 npm install webpack webpack-dev-server  webpack-cli -D (在项目本地也安装一次)

3. mkdir config dist src创建三个文件夹
            文件夹如下所示：

             

4.  npm init -y   成功后会多了一个package.json这个文件
                

5. 手动在dist下创建index.html文件
    手动在src下创建index.js文件
                项目目录如下: 
               
6. webpack4.x中打包默认找src/index.js作为默认入口，
    可以直接在终端中输入命令webpack 将当前的内容进行一个简单的打包
    在终端输入webpack
                
                 这时候看下你的项目目录dist文件下是不是多了一个main.js文件
                
7. 细心的小伙伴应该看到打包的时候终端中会出现黄色的警告提示
          mode是webpack中独有的，有两种打包环境
          一个是开发环境：development
          另外一个是生产环境：production
          打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了
                       下面是输入webpack --mode=development的样子
                        
                        下面是webapck --mode=production命令打包，这个是代码压缩过的，细心的朋友应该也发现打包后小了很多
                        
                        同时项目文件夹下面多了 一个node_modules文件夹
                        
8. 手动在config下创建webpack.dev.js文件
                        现在目录如下:
                        

9. 手动删除dist里的main.js
    手动删除src里的index.js
                        现在目录如下:
                        
10. 手动在src文件夹下面创建main.js文件
                      现在目录如下:
                      
11. 进入到webpack.dev.js文件中进行配置，具体在代码中注释（这里是简单的，具体的下面）
                    
12. 现在不能执行之前的webpack --mode="development"命令了会报下面的错误
                    
        这里是因为webpack4打包默认找的src下面的index.js入口，我们前面已经删除了，这里src下面死main.js文件，所以找不到就报ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误，所以这里我们到packsge.json里面配置下命令，让打包的时候执行我们在config/webpack.dev.js下面配置的入口。
                  

    这个时候我们在终端执行输入命令 npm run build就可以了
                  
13. 现在配置打包时候的入口文件以及出口文件，很多朋友应该也看到webpack.dev.js中的注释的，这里的入口是 './src/main.js'

 //入口文件的配置项
    entry:{
         //里面的main是可以随便写的
         main:'./src/main.js'
    }

    这个时候我们有两个文件入口这么办呢？现在我们再src文件夹下面创建main2.js
                    

  //入口文件的配置项
    entry:{
         //里面的main是可以随便写的
         main:'./src/main.js',
         main:'./src/main2.js' //这里新添加一个入口文件
    },

                 这个时候我们再使用之前配置的命令  npm run build  进行打包
                
    我们会发现报错提示 Conflict: Multiple assets emit to the same filename bundle.js 翻译过来告诉我们 冲突:多个资产发出相同的文件名bundle.js。这个时候就需要我们来配置出口文件了，下面是之前的出口文件
                
     现在我们将原来写死的bundle.js给改成了  [name].js
     注：[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
                   
     这个时候我们再执行打包命令看下
                   
     已经打包好了，这个时候看下出口文件dist下面也打包生成了两个相同入口名字的文件
                   
14. 设置webpack-dev-server，刚开始的时候我们就全局下载这里就不需要下载了，现在需要配置一下devServer。最简单的devServer配置项只有四个
                  
         这个时候直接执行命令webpack-dev-server会报错
                  
        这个时候我们可以到packsge.json里面配置下
                  
         这个时候我们终端输入命令npm run server就可以跑起来了
                  
          然后我们再到项目dist文件夹下面的index.html 文件中引入打包的两个js
                  
          保存后再到src文件下面分别给main.js和main2.js文件里面写一些东西。
          在src/main.js文件下加：

alert("11111")

           在 src/main2.js