Webpack--模块打包器

首先介绍一个安装webpack的百度经验：https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html

推荐一个详细介绍webpack的博客：https://my.oschina.net/lsjcoder/blog/1803141

安装babel==》https://blog.csdn.net/lhtzbj12/article/details/79188342

1、webpack是什么东西？干什么用的:它一个模块打包器

作用：

1、可以当做一个服务器

2、将浏览器不识别的js语法转换为浏览器识别的js语法（将ES6转为可识别的ES5）

3、将我们的模块进行打包 ......

通过npm全局安装的工具

C:{管理员账号路径}\AppData\Roaming\npm

             

全局安装webpack :

            

(1). npm install webpack@3 -g;

             

(2). npm install webpack -dev - server@2 -g;

            

 本地安装

             

npm install webpack@3 -D;

           

npm install webpack - dev - server@2 -D;

      

2、webpack工作的原理：

      入口文件-->module(loader 处理 配置.....)---出口文件

    

                （1）、npm init -y 初始化文件

 

             

                （2）、局部安装webpack cnpm install webpack@3 --save-d                （3）、创建一个webpack.config.js

            

//引入node的核心模块

          

注：以下为js代码

 

             

const path = require("path");         

const  htmlWebpackPlugin = require("html-webpack-plugin");

        

//配置路径

      

const PATH = {

            

    /*

 

             

        path.join将第一个路径和第二个路径结合起来

 

             

        生成一个新的路径

 

             

 

             

        __dirname:当前文件的绝对路径

 

             

     */

 

             

    app:path.join(__dirname,"src/index.js"),

 

             

    main:path.join(__dirname,"dist/")

 

             

}

         

// 忽略文件：

 

 

             创建一个.gitignore文件将node_modules文件忽略：.gitignore文件中写入 node_modules;

 

             

//配置文件

 

             

module.exports = {

 

             

    //入口文件的配置信息

 

             

    entry:{

 

             

        //入口文件的地址

 

             

        app:PATH.app

 

             

    },

 

             

    //出口文件的配置信息

 

             

    output:{

 

             

        //打包完成以后的js文件的名称

 

             

        filename:"[name].js",

 

             

        //打包完成以后的js文件放置的位置

 

             

        path:PATH.main

 

             

    },

 

             

    module:{

 

             

        rules:[

     

            {

  

                //匹配哪些文件用以下的loader

                test:/\.js$/,   

                use:{

                    loader:"babel-loader",    

                    //将ES6的代码转换为ES5的代码

           options:{   

                        presets:["env"]

 

             

                    }

 

             

                }

 

             

            },

       {     

                test:/\.(css|scss)$/,

 

             

                //从右到左 从下到上

 

             

                use:[

 

             

                    "style-loader",

 

             

                    "css-loader",

 

             

                    "sass-loader"]

 

            }

  

        ]

    },  

    plugins:[

 

             

        //自动帮我们创建一个html文件 帮我们把相关的js进行引入

 

             

        new htmlWebpackPlugin({

 

             

            //生成html文件的明细

 

             

            filename:"newIndex.html",

 

             

            template:"index.html",

 

             

            title:"德玛西亚",

 

             

            header:"<h1>诺克萨斯</h1>",

 

             

            list:["张三","李四","陈亮"]       

        }),    

        new htmlWebpackPlugin({

 

             

            //生成html文件的明细

 

             

            filename:"list.html",

 

             

            template:"index.html",

 

             

            title:"德玛西亚",

 

             

            header:"<h1>诺克萨斯</h1>",

 

             

            list:["张三","李四","陈亮"]   

        })

    ]

 

             

}

 

             

 

             

/*以上这种打包方式在4.0中以废除了,4.0以下版本还可以正常使用*/

 

             

 

             

             npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react；

 

             

安装vue-loader:cnpm install vue-laoder@8.5.4 --save-dev:

 

             

cnpm install vue-html-loader --save-dev  

   

　　 　　vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2       

cnpm install vue-laoder@8.5.4 --save-dev    

　　cnpm install vue-html-loader --save-dev     

　　 　　vue-html-loader  css-loader  vue-style-loader vue-hot-reload-api@1.3.2

 

             将项目中的多个模块进行打包，把凡是js html css 等文件通过loader的方式进行模块打包

             

 1.env的配置

             

无法解析es6的函数或者类

     

Set,Map,Promise,Array.from

       

使用balble-preset-es2015/bable-perset-env不能解析

      

解决方式：

         

方式1：balble-polyfill

          

全局的，对全局变量进行定义。为开发应用（插件，框架），做准备

           

npm install bable-polyfill -S

           

方式2.bable-plugin-transform-runtime

           

 编译时解析的，外开发项目框架准备

          

npm install bable-plugin-tramsform-runtime -D