首先介绍一个安装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 

Webpack--模块打包器的更多相关文章

  1. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  2. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

  3. js模块化/js模块加载器/js模块打包器

    之前对这几个概念一直记得很模糊,也无法用自己的语言表达出来,今天看了大神的文章,尝试根据自己的理解总结一下,算是一篇读后感. 大神的文章:http://www.css88.com/archives/7 ...

  4. webpack----js的静态模块打包器

    webpack----js的静态模块打包器 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 简介 webpack 是一个现代 J ...

  5. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  6. webpack模块打包简易版

    webpack基本使用流程(react) 1.安装webpack脚手架 cnpm install webpack webpack-cli -D 2.安装处理css的loader cnpm instal ...

  7. 浅谈Webpack模块打包工具三

    Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sour ...

  8. 浅谈Webpack模块打包工具四

    Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...

  9. webpack打包器简单入门

    概念 webpack是一个现代javascript应用程序的模块打包器. 当webpack处理你的应用程序时,它会递归构建一个依赖图(包含了你的应用程序所需要每个模块),然后把这些模块打包到少数几个b ...

  10. 0基础手把手教你搭建webpack运行打包项目(未完待续)

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

随机推荐

  1. BZOJ4552(二分+线段树)

    要点 序列是n个不同的数,则新学到的一种策略就是二分这个位置的答案,然后可以上下调. 神奇地只关注大于还是小于mid并赋值0.1,这样m个操作的排序就能用线段树维护了! #include <cs ...

  2. ACM-ICPC 2018 沈阳赛区网络预赛 D. Made In Heaven(约束第K短路)

    题意:求11到nn的第kk短的路径长度,如果超过TT输出Whitesnake!Whitesnake!,否则输出yareyaredawayareyaredawa. 好无以为 , 这就是一道模板题, 当是 ...

  3. c/c++中define用法详解及代码示例

    https://blog.csdn.net/u012611878/article/details/52534622   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...

  4. POJ 1556 E - The Doors

    题意:给定n堵墙,现在要你从(0,5)走去(10,5)的最短距离 思路:刚开始还想模拟,就是从(0,5)走,每次x向右一格,然后判断有没和线段相交就可以.但是它的们有可能是小数形式给出的,这样就GG了 ...

  5. 使用freemarker生成html、doc文件【原创】

    语言:java 功能:使用freemarker生成html.doc 1.生成html public void updateuseFreemarker2html(String abdkId) { // ...

  6. Asp.NetCore 从控制台到WebApi

    一.新建一个.NetCore控制台程序 二.添加依赖项 三.添加Startup.cs文件 using Microsoft.AspNetCore.Builder; using Microsoft.Asp ...

  7. SpringBoot | 第五章:多环境配置

    前言 写上一篇看英文资料,耗费了心力呀,这章,相对来说简单点.也比较熟悉,但是这很实用.不扯了,开始~ 多环境配置 maven的多环境配置 springboot多环境配置 总结 老生常谈 多环境配置 ...

  8. JS 分页实现

    var pagesize = 5; var pageindex = 1; var pagetype; var parms; var nextSize = 1; var target; function ...

  9. Java 编码规范有感

    应小组要求,开发测试都需要考阿里编码规范,因此,相当于是突击了一下关于编码规范方面的知识,目前做的项目后期需要进行项目迁移,数据迁移,功能迁移... 各种迁移... 阿里巴巴编码规范(Java)考试地 ...

  10. 从零开始的全栈工程师——js篇2.4

    条件语句与循环语句 变量提升: 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window ,window分两个模块,一个叫内存模块,一个叫运行模块,内存模块找到当前作 ...