您的位置:68399皇家赌场 > 集群主机 > 细说前端自动化打包工具--webpack

细说前端自动化打包工具--webpack

发布时间:2019-05-23 05:51编辑:集群主机浏览(175)

    一部分知识点

    日前在自身的类别中起到的功力:

    ├── dist      // 编译之后输出文件的目录
    ├── src       // 应用逻辑代码存放区域
    │  ├── lib    // 存放npm上找不到的第三方库
    │  │  ├── backbone.js
    │  │  └── underscore.js
    │  ├── static   // 存放静态资源
    │  │  └── logo.png
    │  ├── app.html  // 部件模板
    │  ├── app.js   // 部件代码
    │  └── app.less  // 部件样式
    ├── index.html   // 应用首页模板
    ├── index.js    // 应用入口
    ├── package.json  // 工程配置文件
    └── webpack.config.js // webpack配置文件
    

    怎么着选用webpack

        使用webpack此前,要求设置node.js,然后通过npm 安装webpack.具体的装置进度移动官方网站。本着从入门到精晓的次第,先来看三个最简便易行的利用。

    场景一:

       在demo一目录下,有多少个文本,app.js,cats.js,必要把它们统1/10贰个bundle.js文件. demo01

    cats.js:

    var cats = ['dave', 'henry', 'martha'];
    module.exports = cats;
    

    app.js:

    cats = require('./cats.js');
    console.log(cats);
    

    1经是大局安装的webpack,那么直接在命令行窗口中输入webpack app.js bundle.js就足以了:

    图片 1

    要博取压缩版的也很轻松,在后边扩充3个-p参数:

    图片 2

    bundle.js由原本的一.5八kb减少到30肆b.

    假设每改三遍代码就要输三次命令,就太干燥了,这时就要求扩张一个" -w " 参数 (watch) 监视代码的退换。

    webpack app.js bundle.js -p -w
    

    在意:倘使是clone的代码,试验时,请移除目录下的webpack.config.js文件。

    固然如此简易,然则此地有贰个生死攸关的定义要说一下:官方文书档案中把app.js这几个文件称为“entry point”,即“入口”。代表着webpack从哪伊始。webpack会顺着那些进口文件自动物检疫索当中所信赖的公文,譬喻demo0第11中学的cats.js会自动被载入。而bundle.js 是大家钦赐打包之后输出的文书名,暗中认可的输出目录正是命令运营时所在的目录,也能够在钦赐输出目录,如./dist/bundle.js ,这样webpack就能够活动成立dist目录,然后把bundle.js写在dist目录下。由于app.js这一个进口文件是纯js,webpack直接就能够支撑,假如是其余门类的文件,比方css,就须要运用"loader",即“加载器”,前边会有详尽介绍。

    除去直接用webpack命令钦定入口文件打包之外,还足以经过安排webpack.config.js文件落到实处平等的功用:

    webpack.config.js :

    //最简单的webpack配置
    
    module.exports = {
        entry: './app.js', //入口文件地址
        output: {
            filename: 'bundle.js',  //打包后的文件名
        }
    };
    

    因此布置webpack.config.js之后,在命令行下只须要简单的输入webpack就足以了。如若是如此轻易的利用,分明体现不出webpack.config.js存在的市场总值。平时大家的网址都会有多少个页面,比方index,home,about等等,每一个页面都以3个独自的入口,于是就发生了多入口的情况,上面就看看多入口的情事下,webpack怎么输出区别的打包文件。demo02

     //webpack.config.js
    //多入口示例
    module.exports = {
      entry: {
        bundle1: './main1.js', //入口1
        bundle2: './main2.js'//入口2
      },
      output: {
        filename: '[name].js' // [name]是一个变量,会自动替换成entry的key
      }
    };
    

     和demo01比较,此次的进口(entry)是3个对象, 用键值对的款型内定了多个入口文件,输出的公文名用了变量表示。事实上,入口文件的值还是能是数组。如:

     

     //webpack.config.js
    //多入口示例
    module.exports = {
      entry: {
        bundle1: ['./main1.js'], //入口1
        bundle2: ['./main2.js']//入口2
      },
      output: {
        filename: '[name].js' // [name]是一个变量,会自动替换成entry的key
      }
    };
    

     这种用法,对于入口文件必要钦命五连串型的文件时比较有用。比如['./main1.js','./main1.css'],后边用到再细讲。小结一下:对于entry一共呈现了三种格局:

      壹. entry:'app.js'  直接写入口文件

      二. entry:{bundle:'./main一.js'} 对象情势

      3. entry:{bundle:['./main1.js']} 对象中的值用数组表示

    接下去的demo03将显得webpack在jsx, es六中的用法。那1节内容会稍稍有一点多。首先是package.json文件,它不是webpack的组成都部队分,可是常和webpack项目出双入对,先看一下它的大致模样:

    {
      "name": "demo01",
      "version": "1.0.0",
      "description": "sample to use webpack",
      "main": "index.html",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "start": "webpack"
      },
      "keywords": [
        "webpack"
      ],
      "author": "frog",
      "license": "MIT",
      ”dependencies":{},
      "devDependencies": {
        "babel-core": "^6.20.0",
        "babel-loader": "^6.2.10",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-react": "^6.16.0",
        "react": "^15.4.1",
        "react-dom": "^15.4.1",
        "webpack": "^1.13.0"
      }
    }
    

    有关那一个文件的更加多介绍,请移步法定内容 这里本人只着重介绍一下以下内个内容:

    1. scripts 命令行脚本通过key:value的不二等秘书技讲述。key是脚本名,value是本子试行的内容,通过在命令行中输入npm run 脚本名 就足以实践。那壹块的源委是实在支出中很实用的,这里不实际情况进行,参谋地址

    广大的脚本名有:npm run start , npm run test 。 内置的脚本名(举例start),能够省略run。

    1. devDependencies 开辟依赖,相应的还会有贰个dependencies(能够领悟为生产条件信赖)

    通过npm install 包名 --save-dev (保存到devDependencies),或 --save 保存到(dependencies)

    package.json是用来合作包的治本和公布用的,假诺您不想昭示那么些类型,就像是以上内容对项目开垦并从未怎么好处,不过作为组织同盟,它能够便宜本人和共事连忙搭建项目,管理项目中用到的第二方包。

    下边回到webpack.config.js这几个文件来。由于jsx是react专项使用的语法,高出了js的语法范围,要想加载jsx文件,要求依靠一个loader(加载器), 不一样门类的文书有例外的加载器,比方jsx,es6要用到babel-loader

    加载css要用到css-loader,加载html要用到html-loader等等. 上面是有血有肉的用法:

    module.exports = {
      entry: './main.jsx',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
          {
            test: /.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query:{
               presets:['react','es2015']
            }
          },
        ]
      }
    };
    

      

    装有的loader都位于module上边包车型地铁loaders里边.日常有以下内容:

       一.  test:是对此类文件的正则表达式,用来判断选用这些loader的准绳。

       2.  exclude是清除的目录,比方node_modules中的文件,日常都以编写翻译好的js,能够直接加载,由此为了优化打包速度,可避防除。作为优化手腕它不是必须的。

       三. loader: 加载器的称号,每3个加载器都有属于它和睦的用法,具体要参照官方表明。

       4. query: 传递给加载器的增大参数或布署音讯,有个别也能够经过在根目录下生成非常的文本来单独布署,举个例子.babelrc 

      这里配置好,还不能用,供给设置相应的加载器到项目中来,安装格局很简短,通过命令行,输入npm install 加载器的称谓 --save-dev 或 --save 

    加--save或--save-dev的指标是为着把该插件记录到package.json中去,方便通过npm install的时候自动安装。

    图片 3通过npm3.0 版本安装的时候,它不会活动安装重视,需求手动去安装,举个例子设置这么些babel-loader的时候,它唤醒要安装babel-core和webpack,依次安装就可以。demo0三相比较激进,直接用了jsx和es6的语法,所以要安装的插件比较多,但那也是实际支出中时常应用的。

    "devDependencies": {
        "babel-core": "^6.20.0",
        "babel-loader": "^6.2.10",
        "babel-preset-es2015": "^6.18.0",//es6转普通js用
        "babel-preset-react": "^6.16.0", //解析jsx用
        "react": "^15.4.1",
        "react-dom": "^15.4.1",
        "webpack": "^1.13.0"
      }
    

    鉴于我们在package.json的script中加了2个start脚本,所以此番,笔者不准备老套的用法,这一次来点新鲜的尝尝。直接运转npm start,看看是还是不是大力出神跡。

    图片 4

    那和平昔运营webpack是千篇壹律的结果,不过来得更宏伟上有的。假使您八分之四会不觉用不到react或es六如此新潮的事物,那就请忽略前面的剧情,下边看一些更为简便易行特别常用的加载器

    demo04 css-loader 样式加载器

    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
          { test: /.css$/, loader: 'style-loader!css-loader' },
        ]
      }
    };
    

    此地有五个要留心的地点:

      1。 对于有多少个加载器串联的情景,webpack,它是从右向左注重加载的,也正是说先用css-loader,再用style-loader.

      二.  怎么会有二个style-loader, 因为webpack暗中同意是把css文件插在html文件内,通过style标签加载样式的。所以必要用style-loader这几个加载器。

    假定想要把css用文件的情势link到html中,也是足以的,前面会讲到。

    鉴于我们用了css加载器,所以进口文件其实也足以直接写成:entry:'./app.css'; 效果是同样的。那就展现了,入口文件,不自然假诺js格式,只要有对应的加载器,就足以一贯在输入中利用,以致八连串型混合使用,比方['./app.js','app.css'],都以足以的。

    图片 5

    体制中,平时会用到图片,比方background:url('..logo.jpg'); 假如未有一点名加载器,就可以报错(you may need an appropriate loader to handle this file type),那时,就供给用到图片加载器了,不要认为,唯有在输入中用到的文本才要加载器,只假若在webpack专门的职业中间加载到的公文,只要不是js文件,就必要钦赐加载器,并在webpack.config.js中国中国科学技术大学学学配置。

    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      module: {
        loaders:[
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192&name=[name][ext]'}
        ]
      }
    };
    

    图形加载-demo05 示例中用的是url-loader,并不是意在的image-loader, 原因是url-loader就足以加载图片字体那些文件了,由此不必要重新造轮子,事实上,url-loader还不是终极的加载器,它只不过是对file-loader的进一步封装。通过在url-loader后边加?来挂载越来越多的布局参数,能够兑现定制化的供给,比方对于图片小于81玖贰字节的图片,采用base6肆的方式,直接出口在css中,能够收缩http请求。对于大这一个范围的图形,通过name钦赐输出的文书名,在前边钦定路径也是能够的。举个例子[name][ext] ,这里的[name]和[ext]都是变量的象征,后面有讲过,用在这里,表示用原来输入时的公文名和扩大名。须要注意的是,那么些门路是参考默许的出口路线的来的。假诺要钦定输出路线怎么处理呢?

    请参照他事他说加以调查以下办法:

       1. 通过在webpack.config.js 中指定,output:{path:'./dist',...}

    module.exports = {
         entry: './src/app.js',
         output: {
             path: './dist',//新的输出路径
             filename: 'app.bundle.js'
         }
     };
    

    './'代表项目标当前目录,平常指根目录,那是1种相对路线的表示,也得以用绝对路线,通过path.resolve(__dirname,'./')来内定,那时,webpack所生成的js,css文件都会产生./dist目录下,而对此本例中的图片,则照旧在./目录下,

    图片 6

    并没有把图片生成在dist目录下,试试 loader: 'url?publicPath=./dist/'
    
    module.exports = {
      entry: ['./main.js','./icon.css'],
      output: {
        path:'./dist',
        filename: 'bundle.js'
      },
      module: {
        loaders:[
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192&publicPath=./dist/'},
            { test: /.css$/, loader: 'style-loader!css-loader' },
        ]
      }
    };
    

    图片 7  

     通过点名那些publicPath完结了图片生成到钦定的目录。一样的,通过在output中内定这么些值也是如出壹辙的功力。

     output: {
        path:'./dist',
        publicPath:'./dist/', //在这里指定同样生效
        filename: 'bundle.js'
      },
    

    以此public帕特h原本是用来安顿虚拟目录用的,也正是通过http格局访问时的路线,大概通过webpack HMTiggo格局加载时的出口目录。在这里不得不算是一种hack用法。聊起output,就要提一下文书缓存[hash]的用法:

      output: {
        path:'./dist',
        publicPath:'./dist/',
        filename: 'bundle_[hash:8].js' //通过:8截取has值的前8位
      },
    

      这个[hash]功用很少被波及,在事实上支出中,是很广阔的效果,原样输出的hash我认为太长,能够透过[hash:加数字]的情势实行截取,很方便。

    对于webpack.config.js ,前面早已介绍了entry,output,module,上面以代码丑化为例,说说plugins,webpack的插件的用法:demo07

    var webpack = require('webpack');
    var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    module.exports = {
      entry: './main.js',
      output: {
        filename: 'bundle.js'
      },
      plugins: [
        new uglifyJsPlugin({
          compress: {
            warnings: false
          }
        })
      ]
    }
    

    plugins:的值是二个数组,全部插件都经过npm install进行安装,然后在plugins数组中增加对应的插件配置。有四个插件必要提一下:

    一. HtmlwebpackPlugin 那么些插件能够把变化的css ,js 插入到html页中的head,body中,那对于加了hash值的输出很有用。那么些功能也能够用gulp的insject插件做。可是既然用webpack了,就有的时候忘了gulp吧。在具有相似作用的例外的工具之间切换,并不是一个好主意。可是html那款插件有三个小小的的难点,它对html中的img不会像css中那样分析。形成dist目录下的html文件,img下的src报错。化解办法是增加html-withimg-loader这几个插件。

           {
                test:/.html$/,
                loader:'html-withimg-loader?min=false'
            },
    
    1. CommonsChunkPlugin 提取公共代码,那么些无需安装,webpack集成有。

      new webpack.optimize.CommonsChunkPlugin({

               name:'vendor',
               filename:'js/vendor.js',
               chunks:['chunk1','chunk2','chunk3']//不写为所有的chunk,
           }),
      

    chunk (块), webpack中另二个杰出重大的定义,和entry对应。有三种情形:

    二.1 假设entry通过字符串的措施内定的输入文件,那么chunk正是指入口文件,举例entry: './app.js'; 那么可以分明chunk和'./app.js'11对应。

    2.2 如果是entry:['./app1.js','app2.js']那就是说chunk正是那三个文本之和。

         *  以上chunk的[name]便是私下认可的"main".

    二.叁  假设是底下这种样式:

    entry:{
       index:'./index.js',
       error:'./error.js',
       vendor:['react','redux']
    }
    

    那就是说就能够生出多少个chunk,[name]分别和index,error,vendor对应。

    三. ExtractTextPlugin 这一个插件就是始于提到的,从html中分离css的插件。npm install extract-text-webpack-plugin --save-dev

     plugins: [
            new ExtractTextPlugin("[name].css"),
    ]
    

    图片 8

    亟待注意的是,要是在[name].css前边加了子路线,如css/[name].css  那么快要小心样式中的图片路线出错,特别是在未有一点点名publicPah的图景下。background:url(那几个地点的图片默许是和chunk的出口路线同级的,假诺钦定了publicPath,则以publicPath取代,不存在这一个问题),可是出于大家人为的钦命了打包后的样式放在css/目录下,而图片私下认可还在原先的目录,这就产生css中援引的图形路线失效。看上面包车型地铁事例:

    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    module.exports = {
      entry: ['./main.js','./icon.css'],
      output: {
        path:'./dist',
        //publicPath:'./dist/',
        filename: 'bundle_[hash:8].js'
      },
      module: {
        loaders:[
            { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'},
            { test: /.css$/, loader: ExtractTextPlugin.extract('style', 'css') },
        ]
      },
      plugins: [
        new ExtractTextPlugin("css/[name].css"),
      ]
    };
    

      图片 9

     从图上来看,添了css子目录之后,样式中的图片,依旧原本的门路,而图片并不存在css目录下。

    消除办法,要么不加子目录,保持样式文件和图表文件一贯在同一层级,要么增添publicPath,相当于选用相对路线。由于这一个是在webpack.config.js中配备的,要调换也很轻易。

    看起来整个都很赏心悦目好,但是当大家的html中也用了img标签的时候,难点就来了,还记得html-withimg-loader那么些插件吗?它际实上也是调用的url-loader,所以,它最后的图片输出路径也样受publicPath的震慑。思量一下那样的目录结构:

     图片 10

    体制文件是位于css子目录,而html则是和图纸保持同级的。样式中的图片要求钦定为"../",而html中的图片必要钦命成"./",那在同叁个publicPath中,展现是冲突的。那时就需求权衡一下,要么全体的公文都堆在根目录下,要么html中的图片用别的插件举办拍卖。总来说之,不可能让这种相争持的情况时有爆发。

    终极再轻易说一下webpack.config.js 中的 resolve;

    resolve: {
        extensions: ['', '.js', '.vue', '.json']
      },
    

    日常大家都知情通过安排这些本性下的extensions,可以大约扩展名,就如从未什么能够介绍的,直到有三回小编在品种中通过npm install vue --save 安装了vue ,然后笔者在代码中用import Vue from 'vue' 导入了vue。到这一步都以正规的,可是当自家筹划进一步行使vue的时候,代码就报错了,然后去查官方文书档案(出错的时候不要慌张,大许多情景都会在法定找到消除的不二诀窍,举例github中的issue等)。合法介绍如下:

    “ There are two builds available, the standalone build and the runtime-only build. The difference being that the former includes the template compiler and the latter does not.By default, the NPM package exports the runtime-only build. To use the standalone build, add the following alias to your Webpack config:”

    resolve: {
        alias: {
          'vue$': 'vue/dist/vue.common.js'
        }
      },
    

    马虎是说:vue有三种创设立模型式,独立创设和平运动作营造。它们的界别在于前者带有模板编写翻译器而后人不包罗。而默许NPM 包导出的是 运维时 营造。为了利用独立创设,要在 webpack 配置中加多上边包车型地铁小名:增多alias:{'vue$':'vue/dist/vue.common.js'}. 这么些别称,同样适用于jquery,zepto这几个库。

    对此vue来讲,假诺不用小名,也得以从node_modules/vue/dist/复制vue.common.js到支付目录下,举例./src/vue下边,然后像平常的js文件一律引用, import vue from './src/js/vue.common.js' 那也是足以的。只是和利用小名相比较,显的很lower 

    前言

    上学vue的进度鲜明会触发到vue的单文件组件,进而接触到vue-cli(vue工程创设的脚手架工具),可是vue-cli创造的工程对初学者很不团结,vue init webpack-simple project-name创造的项目又太过轻松和片面。

    本课程会分几篇小说稳步深切安插webpack,想要后续更新能够关切哦~

    接下去大家从初始化到写配置再到增加loader和插件稳步构建三个可用的vue工程化碰着,让初学者亲自搭建vue-cli之余还叩问到webpack常用的1对布局项。

     

    如上就是本文的全体内容,希望对大家的上学抱有支持,也期望我们多多扶助脚本之家。

    背景

    回想2004年的时候,网络支付正是做网页,那时也没有前者和后端的分别,有的时候一个网址正是有些纯静态的html,通过链接协会在联合。用过Dreamweaver的都知情,做网页仿佛用word编辑文档同样。贰个html页面,夹杂着css,javascript是再常见可是的事了。

    图片 11

    随着前端的缕缕进化,特别是单页应用的勃兴,这种所见即所得的IDE工具,就稳步地淡出了前者的主流。一个施用,平日惟有3个静态页面(index.html),甚至那些页面包车型大巴body只有一个或个别多少个div组成。那时有雅量的css和javascript代码必要编写制定。如何组织他们,正是当今前端所面对和要缓慢解决的主题素材。

    图片 12

     一些很好的前端框架(像angularjs,React,Vue)能够帮我们如何合理的团协会代码,保持代码的可维护性和扩大性。那在开拓阶段是很有用的,可是要把利用发表到线上的时候,要求把代码进行联合压缩,以减小代码体量,和文件数量,人为的对代码进行抹黑。于是就有了grunt,gulp,webpack等前端工程化打包工具。

    装进运维一下

    包装在此以前笔者改改npm scripts,那样就能够看来打包进程,和隐身不须要的消息

     "build": "webpack --progress --hide-modules"
    

    运作打包

    npm run build
    

    在浏览器中开拓index.html,能够看出运转如常

    页面.png


    2、webpack-dev-server

      类似于tomcat、是前者的web容器。前端工程打包后,就透过它访问

    1. root: 模块找寻路线数组,告诉webpack从哪儿去找模块。作者那边定义了二个src/lib路线,作者把有个别库放在这一个渠道上边。引用的时候,能够直接require(‘underscore.x.x.x.js');不必加路线。
    2. extensions: 拓展名,设置扩展名后,能够require(‘underscore'),不必加.js,这里一定要安装,不然,webpack-dev-server 会报错,真心坑爹。
    3. alias: 经过地方的装置,已经得以随便引进叁方模块了,不过本身觉着选用别称的不二秘籍越来越好,更方便管理。在文书中援引公共库的时候防止采纳路线的办法,比方require(‘../../lib/ssssss.js')。在外号中定义好就可以。

    小结

    选拔webpack,分为三种方法,一种是CLI(命令行格局),1种是API格局(new webpack(config)),二种方法都能够经过webpack.config.js 来配置。所以读书webpack,便是左右webpack.config.js配置的进度。我逐一介绍了entry,output,module,plugins,resolve,本来还想写写webpack的热加载HMOdyssey, 以及webpack-dev-server,browser-sync结合webpack的用法,感到要写的内容有一点多,那么些剧情也是事实上开支中格外管用的技艺。越写到前面,越以为费事下笔。想起一句话,要想给外人壹滴水,本人至少要有壹桶水。前端工程自动化方案更新异常的快,webpack还未有来的极遍布,webpack2,rollup等又出去了. 学习这么些工具,是为了缓慢解决重复劳动,升高功用。采纳符合自身的方案,而不是在搜寻技艺的旅途迷失了样子。

     

    上期预先报告

    眼前全部vue项目为主可用,然而还地处最基础的loader增加和配置阶段,后续还应该有热插拔、代码提取、代码压缩的等一多级plugins(插件)的引进。

    有vue-cli和webpack使用基础的人会感到,以上内容更偏向入门,可是任何都有2个顺序渐进的长河,对初学者的话从0开首搭建是3个很实用的上学进度,基础工程搭好了,前边就是大旨了。

    下壹期大家来进一步助长插件实现越多的效劳,也会引进编写翻译器转变器的第三方安插介绍(.babelrc、postcss)。

    • 第二期已经更新 从搭建vue-脚手架到调控webpack配置(②.插件与提取)

    !!!小说首发地址

    前者工程化(二)---webpack配置

    module 那1部分,小编不是很理解,只明白这里能够用于loader定义。loaders是一个数组。

    vue-loader

    vue-loader,是用来编写翻译vue项目中组件化文件 *.vue ,把其转移为JavaScript的webpack loader。那是vue职业最珍视也是早晚上的集会用到的loader,所以提前提一下。

    从0开首,营造前后端分离应用

    开始

    参考

    • webpack 搭建 vue 项目(https://juejin.im/post/5a425cb4f265da43294e4f2e)
    • vue-loader官方文档(https://vue-loader.vuejs.org/zh-cn/)
    • wepack中文文书档案(http://www.css88.com/doc/webpack2/)

    一、webpack在前端工程打包进程中起到了何等效益

      证明入口(entry):通俗来说,就是种类的营造进度是从哪早先,内定的是二个或五个js文件。前端开辟,都以基于es六的模块化概念的,每2个文本都能够以为是贰个模块,模块之间利用import语句相互引用,相互同盟。这种倚重最终会产生1颗正视树,而进口文件正是树的根。webpack 会寻找有哪些模块和库是进口起源(直接和直接)依赖的。每一个正视项随即被拍卖,最终输出到**.bundles文件中

      评释出口(output):其实即是创设输出目录,也正是前者工程化(一)---工程基础目录搭建中创立的dist目录

      对于非JavaScript文件的管理(loader):webpack本身只好精通JavaScript,在模块注重进程中,除了.js文件外,对于vue、css等模块的import是力不从心知晓的。loader将vue、css、图片等音讯转化为webpack能清楚的诀要,从而实现模块之间的依靠

      插件的接纳(plugin):例如常用的HtmlWebpackPlugin插件、ProvidePlugin等,支持项指标营造

    // index.html 入口模板
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>vueapp</title>
    </head>
    <body id="app">
      <app></app>
    </body>
    </html>
    

    创办webpack配置文件

    webpack在运转时候会找到启用webpack命令目录下的webpack.config.js,所以要开创该文件到品种根目录下。

    //webpack.config.js
    const path = require('path')
    module.exports ={
        entry:'./src/main.js',
        output:{
            path:path.resolve(__dirname,'dist'),
            filename:"js/[name].js"
        }
    }
    

    以上是最简便的沙盘,设置了进口文件(entry)和讲话地点(output),这个有点webpack基础的都知情,不掌握的先去入门一下webpack的基础配置。

    而path函数则是node自带的渠道相关的中间件,基本上全部项目就用到那样二个node的中间件,path就是用来做路线拼接再次回到1个门路字符串,能够归纳看一下path。

    • 而且还要创设index.html和main.js文件,项目目录结构如下:

    连串结构.png

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue demo</title>
    </head>
    <body>
        <div id="app">
        </div>
        <script src="./dist/js/main.js"></script>
    </body>
    </html>
    

    main.js里面随意写点js就行

    前者工程化(一)---工程基础目录搭建

    利用npm开端化学工业程

    用less或者sass

    你能够在档次中用less可能sass,相对的就要安装less-loader和sass-loader

    npm install --save-dev less-loader
    npm install --save-dev sass-loader
    

    壹经没有在全局安装less或sass编写翻译器的话还恐怕有安装一下,实施上面loader安装在此之前先安装less或sass

    安装到本项目中
    npm install --save-dev less
    安装到全局中
    npm install --g less
    

    以less-loader为例,修改webpack.config.js

    {
        test:/.less$/,
        use:[
            'vue-style-loader'
            'css-loader',
            'less-loader'
        ]
    },
    {
        test:/.vue$/,
        loader:'vue-loader',
        options:{
            loaders:{
                'less':[//lang属性对应的名称
                    'vue-style-loader'//首先给vue的样式loader过滤一遍
                    'css-loader',//css-loader,把css转js
                    'less-loader'//用less编译
                ]
            }
        }
    }
    

    选择vue单文件组件的时候给lang属性增多标记就能够了,less后缀的文书也会同步进行编写翻译

    <style lang="less">
        #app{
            img{width:100px;}
        }
    </style>
    

    sass类似,但sass带有两种语法标准sass和scss,要求各自设置,下边就贴一点vue-cli的代码,然而多的牵线了。

    sass.png

    依靠less和sass预管理器的增进和配备格局,你能够用上typeScript、pug等js和html的预管理插件。记得给template、script、style标签加多lang属性说明哦

    有了es⑥用上js的别的预管理语言的景色也不多了,html的话照旧习于旧贯写完整dom

     

    比如: 入口文件名为index,那么它的输出正是index.d八7f八柒sd六fsdgs76gsd玖陆柒.js

    loader配置项

    每一类loader都对应着一种文件,我们相配项目种的公文增多loader。

    配置项的简便介绍写在解说里啰, 认真看注释咯!!!

    const path = require('path')
    const webpack = require('webpack')
    
    module.exports = {
        entry:{
            app:'./src/main.js',
        },
        output:{
            path:path.resolve(__dirname,'./dist'),
            filename:"js/[name].js",
        },
        module:{
            rules:[
                {
                    test:/.js$/, //用正则匹配文件,用require或者import引入的都会匹配到
                    loader:"babel-loader", //加载器名,就是上一步安装的loader
                    exclude:/node_modules/ //排除node_modules目录,我们不加载node模块中的js哦~
                },
                {
                    test:/.css$/,
                    use:[
                        'style-loader',
                        'css-loader',
                        // 'postcss-loader'
                    ]
    
                    //依次使用以上loader加载css文件,postcss-loader可以暂时不加,后面再深入修改webpack配置的时候再说用处
                    //
                    //也可以写成这样 loader:"style-loader!css-loader!postcss-loader"
                },
                {
                    test:/.(png|jpe?j|gif|svg)(?.*)?$/,
                    loader:'url-loader',
                    options:{
                        limit:10000,
                        name:'img/[name].[ext]?[hash]'
                    }
                    //图片文件大小小于limit的数值,就会被改写成base64直接填入url里面,
                    //不然会输出到dist/img目录下,[name]原文件名,[ext]原后缀,[hash]在url上加上一点哈希值避免缓存。
                },
                {
                    test:/.(woff2?|eot|ttf|otf)(?.*)?$/,
                    loader:"url-loader",
                    options:{
                        limit:10000,
                        name:'fonts/[name].[ext]?[hash]'
                    }
                    //和上面一致
                },
                {
                    test:/.vue$/,
                    loader:'vue-loader'
                    //这一个loader当然是vue项目必须的加载器啦,不加其他规则的话,
                    //简单的这样引入就可以了,vue-loader会把vue单文件直接转成js。
                },
            ]
        },
        resolve:{
            //引入路径是不用写对应的后缀名
            extensions: ['.js', '.vue', '.json'],
            //缩写扩展
            alias:{
                //正在使用的是vue的运行时版本,而此版本中的编译器时不可用的,我们需要把它切换成运行时   编译的版本
                'vue$':'vue/dist/vue.esm.js',// 'vue/dist/vue.common.js' for webpack 1
                //用@直接指引到src目录下,如:'./src/main'可以写成、'@/main'
                '@': path.resolve(__dirname,'./src'),
            }
        },
    }
    

    合法汉语文书档案还介绍了一部分之上用到的loader和任何的loader,能够去看一下。

    用loader的时候能够上《npmjs》查看种种loader大概正视的详细用法,那是多少个好习贯!~

    npm官网.png

     

    听别人说须求设置项指标音讯, 也足以壹并回车,使用暗许信息,私下认可项目名字为文件夹名(项目名称不要设置成某些模块名,不然以后你引用摸个模块的时候会报错)

    始建筑工程程

    前提你曾经设置了node、npm情况

    mkdir project-vue
    cd project-vue
    
    npm init
    //初始化设置都按enter默认就好,或者按你需要改
    

    安装webpack到品种中

    npm install --save-dev webpack
    //啰嗦一下淘宝镜像设置
    npm install -g cnpm –registry=https://registry.npm.taobao.org
    

    导航

    'dev': 'webpack-dev-server --hot --inline'
    

    起首使用.vue

    毫无说你或多或少vue都不会来看那偏小说哦

    main.js改成如下

    import Vue from 'vue'
    import './styles/main.css'
    import App from './app.vue'
    
    new Vue({
      el:"#app",
      template:'<App/>',
      components:{App}
    })
    

    新建二个app.vue文件

    <template>
        <div id="app">
            <img src=".logo.png" alt="logo" />
            {{msg}}
            <p class="test">test text</p>
        </div>
    </template>
    <script>
    import Vue from 'vue'
        export default {
            name:'app',
            data(){
                return {
                    msg:"hello vue !!"
                }
            },
        }
    </script>
    <style >
        .test{
            color:#020202
        }
    </style>
    <style lang="less"><!--我好像还没说引入less哦,下面说-->
        #app{
            img{width:100px;}
        }
    </style>
    

    别忘了弄张图片,写个main.css哦

    /*main.css*/
    @import './reset.css';
    #app{
        color:red;
    }
    

    作者还引进了reset.css

    src目录.png

    5、启动

    执行如下命令运转

    cnpm run start

    以下是自个儿要好的档期的顺序的起步音信:

    图片 13图片 14

    > webpack-dev-server --config webpack.dev.js
    
    ℹ 「wds」: Project is running at http://localhost:8080/
    ℹ 「wds」: webpack output is served from /
    ℹ 「wds」: Content not from webpack is served from ./dist
    ⚠ 「wdm」: Hash: b306468681d3292664db
    Version: webpack 4.5.0
    Time: 5360ms
    Built at: 2018-5-12 11:10:35
                          Asset       Size  Chunks             Chunk Names
             js/login.bundle.js   5.74 MiB   login  [emitted]  login
      img/ionicons.2c2ae068.eot    118 KiB          [emitted]  
      img/ionicons.24712f6c.ttf    184 KiB          [emitted]  
     img/ionicons.05acfdb5.woff   66.3 KiB          [emitted]  
    img/background.98bc53d2.jpg   1.32 MiB          [emitted]  
             js/index.bundle.js   6.23 MiB   index  [emitted]  index
      img/ionicons.621bd386.svg    326 KiB          [emitted]  
                      index.css    258 KiB   index  [emitted]  index
                      login.css    258 KiB   login  [emitted]  login
                   logo.net.ico    2.4 KiB          [emitted]  
                     index.html  438 bytes          [emitted]  
                     login.html  433 bytes          [emitted]  
    Entrypoint index = js/index.bundle.js index.css
    Entrypoint login = js/login.bundle.js login.css
    [./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client/index.js?http://localhost:8080] ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 7.75 KiB {login} {index} [built]
    [./src/assets/styles/common.less] 1.35 KiB {login} [built]
    [./src/components/common/WolfTotem.js] 1.47 KiB {index} [built]
    [./src/components/imageUpload/imageUpload.js] 447 bytes {index} [built]
    [./src/components/layout/layout.js] 403 bytes {index} [built]
    [./src/components/menu/menuTree.js] 418 bytes {index} [built]
    [./src/components/modal/modal.js] 405 bytes {index} [built]
    [./src/components/select/select.js] 413 bytes {index} [built]
    [./src/components/table/dataTable.js] 437 bytes {index} [built]
    [./src/index.js] 2.61 KiB {index} [built]
    [./src/login.js] 780 bytes {login} [built]
    [./src/login.vue] 2.34 KiB {login} [built]
    [./src/routes/router.js] 644 bytes {index} [built]
       [0] multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {index} [built]
       [1] multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/login.js 40 bytes {login} [built]
          122 hidden modules
    
    WARNING in ./src/components/menu/menuTree.vue (./node_modules/_vue-loader@14.2.2@vue-loader/lib/template-compiler?{"id":"data-v-79741c26","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/_vue-loader@14.2.2@vue-loader/lib/selector.js?type=template&index=0!./node_modules/_iview-loader@1.0.0@iview-loader??ref--4-1!./src/components/menu/menuTree.vue)
    (Emitted value instead of an instance of Error) <MenuItem v-for="menu in mu.children">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
     @ ./src/components/menu/menuTree.vue 10:0-443 22:2-16 23:2-27
     @ ./src/components/menu/menuTree.js
     @ ./src/index.js
     @ multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js
    
    WARNING in ./src/components/menu/menuTree.vue (./node_modules/_vue-loader@14.2.2@vue-loader/lib/template-compiler?{"id":"data-v-79741c26","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/_vue-loader@14.2.2@vue-loader/lib/selector.js?type=template&index=0!./node_modules/_iview-loader@1.0.0@iview-loader??ref--4-1!./src/components/menu/menuTree.vue)
    (Emitted value instead of an instance of Error) <Submenu v-for="mu in menus">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
     @ ./src/components/menu/menuTree.vue 10:0-443 22:2-16 23:2-27
     @ ./src/components/menu/menuTree.js
     @ ./src/index.js
     @ multi ./node_modules/_webpack-dev-server@3.1.1@webpack-dev-server/client?http://localhost:8080 ./src/index.js
    Child extract-text-webpack-plugin node_modules/_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin/dist node_modules/_css-loader@0.28.11@css-loader/index.js!node_modules/_iview@2.12.0@iview/dist/styles/iview.css:
         4 assets
        Entrypoint undefined = extract-text-webpack-plugin-output-filename
        [./node_modules/_css-loader@0.28.11@css-loader/index.js!./node_modules/_iview@2.12.0@iview/dist/styles/iview.css] ./node_modules/_css-loader@0.28.11@css-loader!./node_modules/_iview@2.12.0@iview/dist/styles/iview.css 260 KiB {0} [built]
        [./node_modules/_css-loader@0.28.11@css-loader/lib/css-base.js] 2.21 KiB {0} [built]
        [./node_modules/_css-loader@0.28.11@css-loader/lib/url/escape.js] 448 bytes {0} [built]
        [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.eot?v=2.0.0] 71 bytes {0} [built]
        [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.svg?v=2.0.0] 71 bytes {0} [built]
        [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.ttf?v=2.0.0] 71 bytes {0} [built]
        [./node_modules/_iview@2.12.0@iview/dist/styles/fonts/ionicons.woff?v=2.0.0] 72 bytes {0} [built]
    Child html-webpack-plugin for "index.html":
         1 asset
        Entrypoint undefined = index.html
        [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/assets/templates/index.html] 577 bytes {0} [built]
        [./node_modules/_lodash@4.17.5@lodash/lodash.js] 527 KiB {0} [built]
        [./node_modules/_webpack@4.5.0@webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
        [./node_modules/_webpack@4.5.0@webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
    Child html-webpack-plugin for "login.html":
         1 asset
        Entrypoint undefined = login.html
        [./node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/loader.js!./src/assets/templates/login.html] 579 bytes {0} [built]
        [./node_modules/_lodash@4.17.5@lodash/lodash.js] 527 KiB {0} [built]
        [./node_modules/_webpack@4.5.0@webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
        [./node_modules/_webpack@4.5.0@webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
    ℹ 「wdm」: Compiled with warnings.
    

    View Code

     

    在浏览器中就足以访问了(做到四分之贰的东西)

    图片 15

     

    5. 编译

    引进1层层的注重和loader

    vue工程当然要设置vue注重啦~~

    npm install --save vue
    

    vue-loader是必须的,vue-template-compiler是vue-loader必须的注重

    npm install --save-dev vue-loader vue-template-compiler
    

    写今世的门类怎么只怕毫无到es陆以上,来个es编译器loader

    npm install --save-dev babel-core babel-loader
    

    再来个css的加载器和转换器,style-loader会把css转成js,再贴到html的style标签上的啊~

    npm install --save-dev css-loader style-loader
    

    还恐怕有图片文件和字体文件的加载器,url-loader重视于file-loader所以都要安装,url-loader会把小于限制的公文字改良成base64格式直接传入src里面,能够下降网络请求次数。而file-loader会自动帮我们抬高文件名规则而且url地址一同跟着变动。

    npm install --save-dev file-loader url-loader
    

    如上的loader的配备上边早先简要疏解

    4、webpack的路径

      在配置entry等急需制订文件地方的成分的时候,须要内定文件所在的路子。

      刚刚接触webpack的时候,总是被路线搞糊涂,总是提醒找不到文件。

      记住一点,一定要接纳"__dirname"来布局文件的路线(注意,是七个下划线)。

      “__dirname”是node.js中的二个全局变量,它指向当前实施脚本所在的目录。在webpack的陈设文件中选择__dirname,那就意味着当前的陈设文件所在的门道

          文件路线=__dirname 绝对路线

     

    您也许感兴趣的篇章:

    • 浅谈在vue中用webpack打包之后运营文件的主题材料以及有关布置方式
    • 缓和vue webpack打包路线的难点
    • Vue项目webpack打包布署到汤姆cat刷新报40四不当难点的解决方案
    • vue和webpack打包项目相对路线修改的不贰秘技
    • vue-cli与webpack管理静态能源的点子及webpack打包的坑
    • vue消除选取webpack打包后keep-alive不见效的艺术

    运营一下探究

    webpack
    

    从不在大局安装webpacknpm install -g webpack的话以上命令不能执行。也足以修改npm scripts急迅运营,展开package.json,加多scripts项。

    那边有一份阮1峰老师 npm script的介绍,不用谢

    {
      "name": "vue-demo",
      "version": "1.0.0",
      "description": "this is a vue demo",
      "main": "index.js",
      "scripts": {
        "build": "webpack"
      }
    }
    
    npm run build
    

    根目录下会多出贰个dist文件夹里面放了打包好的文书。

    现实安插进程

    只顾:一定要搞明白自个儿安装的webpack版本,差别的本子配置是天悬地隔的。比如从webpack2->webpack四这种大学本科子跳跃,对于loader的安插是有非常的大的区别的。笔者眼下的webpack版本是肆.5.0

     

    前者工程化(①)---工程基础目录搭建 中已经介绍了何等设置webpack,上面直接介绍配置的经过

    ├── dist
    │  ├── common.6b92c6b075a69a71d22f.js
    │  ├── index.6b92c6b075a69a71d22f.js
    │  ├── index.html
    │  └── style.6b92c6b075a69a71d22f.css
    

    部分官方文书档案

    • webpack
    • vue-loader
    • .babelrc(babel配置)
    • postcss(插件转样换式工具)和babelrc会在背后不难谈起
    • npm(用到插件就多去插件库查下用法)

    3、配置webpack

    webpack.common.js的配置

    值得注意的是

    第八陆行的jquery引进格局,Vue固然不提议类似于Jquery那样的类库去向来操作DOM,但是有个别场景下,使用JQuery照旧很方便的,比如利用$.extend来扩大对象,一般都以在编写组件的时候用到

    第4~7行是node引进模块的办法。这种办法能够成功的引进模块,是凭仗于地面包车型大巴模块库,也正是种类根目录下的node_modules文件夹

    怎么是Node的大局安装,什么又是本地安装?

    图片 16图片 17

      1 /*
      2 通用配置
      3 */
      4 const path = require('path')
      5 const HtmlWebpackPlugin = require('html-webpack-plugin')
      6 const webpack = require('webpack')
      7 const ExtractTextPlugin = require("extract-text-webpack-plugin")
      8 module.exports = {
      9   entry:{
     10     index:path.join(__dirname,'src/index.js'),
     11     login:path.join(__dirname,'src/login.js')
     12   },
     13   output: {
     14     filename: 'js/[name].bundle.js',
     15     path: path.resolve(__dirname, 'dist')
     16   },
     17   module:{
     18     rules: [
     19       // 解析vue文件
     20       {
     21         test:/.vue$/,
     22         use:[
     23           'vue-loader',
     24           {
     25             loader:'iview-loader',
     26             options:{
     27               prefix:false
     28             }
     29           }
     30         ]
     31       },
     32       // 使用babel解析js文件,当js文件中包含es6的时候,需要它
     33       {
     34         test: /.js$/,
     35         exclude: /(node_modules|bower_components)/,
     36         use: {
     37           loader: 'babel-loader',
     38           options: {
     39             presets: ['env']
     40           }
     41         }
     42       },
     43       // 管理样式资源,使js文件能够引入css模块
     44       // 抽取样式文件为单独的css文件
     45       {
     46         test:/.css$/,
     47         // use:[
     48         //   'style-loader',
     49         //   'css-loader'
     50         // ]
     51         use: ExtractTextPlugin.extract({
     52           fallback: "style-loader",
     53           use: "css-loader"
     54         })
     55       },
     56       {
     57         test:/.less$/,
     58         use:[
     59           'style-loader',
     60           'css-loader',
     61           'less-loader'
     62         ]
     63       },
     64       // 管理图片文件,使css文件能够对图片引用
     65       {
     66         test:/.(png|svg|jpg|gif)$/,
     67         use:[
     68           {
     69             loader:'file-loader',
     70             options:{
     71               name:'img/[name].[hash:8].[ext]'
     72             }
     73           }
     74         ]
     75       },
     76       // 管理字体文件
     77       {
     78         test:/.(woff|woff2|eot|ttf|otf)$/,
     79         use:[
     80           {
     81             loader:'file-loader',
     82             options:{
     83               name:'img/[name].[hash:8].[ext]'
     84             }
     85           }
     86         ]
     87       }
     88     ]
     89   },
     90 
     91   plugins: [
     92     // new HtmlWebpackPlugin({
     93     //   title: 'Production'
     94     // }),
     95     // shimming配置,使jquery能够在所有模块中使用
     96     new webpack.ProvidePlugin({
     97       $:'jquery'
     98     }),
     99     // 将css样式文件从js 打包中抽取出来,形成名字叫styles.css的文件
    100     new ExtractTextPlugin("[name].css"),
    101     new HtmlWebpackPlugin({
    102       // 文件title,如果不使用模板,那么直接就会显示在生成的文件中
    103       // 如果使用了模板,那么就要使用表达式<%=htmlWebpackPlugin.options.title%>
    104       title:'后台主页',
    105       //生成目标文件的名字
    106       filename:'index.html',
    107       //可以指定生成目录
    108       // filename:'assets/index.html'
    109       // 指定模板
    110       template:'./src/assets/templates/index.html',
    111       // 指定资源引入的script标签位置
    112       inject:'header',
    113       // 加入icon图标
    114       favicon:'./src/assets/icons/logo.net.ico',
    115       // 压缩代码
    116       // 具体选项见https://github.com/kangax/html-minifier#options-quick-reference
    117       minify:{
    118         // 去除注释
    119         removeComments:false,
    120         // 压缩HTML代码,变成一行
    121         collapseWhitespace:false
    122       },
    123       // 在html页面引入打包后的js和css资源的时候,加上hash码
    124       // hash:true,
    125       cache:true,
    126       // 在生成html的过程中,如果出现错误,则显示在html页面上,默认为true
    127       showErrors:true,
    128       chunks:[
    129         'index'
    130       ]
    131     }),
    132     new HtmlWebpackPlugin({
    133       filename:'login.html',
    134       title:'欢迎您,请登录',
    135       hash:false,
    136       template:'./src/assets/templates/login.html',
    137       showErrors:true,
    138       chunks:[
    139         'login'
    140       ],
    141       // 指定资源引入的script标签位置
    142       inject:'header',
    143       // 加入icon图标
    144       favicon:'./src/assets/icons/logo.net.ico',
    145       // 压缩代码
    146       // 具体选项见https://github.com/kangax/html-minifier#options-quick-reference
    147       minify:{
    148         // 去除注释
    149         removeComments:false,
    150         // 压缩HTML代码,变成一行
    151         collapseWhitespace:false
    152       },
    153     })
    154   ],
    155 }
    

    View Code

    webpack.dev.js的配置

    值得注意的是

    devServer的功效:它是webpack-dev-server的布局项,能够定义开启端口等web容器相关的新闻。具体的配置消息参见法定文书档案

    其余正是proxy的安顿:它是用来减轻跨域难点的。由于体系是左右端分离的,由此一定会提到到跨域,配置中的意思就是假如请求是以'/api'初叶的,那么快要转载到'

    图片 18图片 19

     1 /*
     2   开发环境配置
     3 */
     4 const merge = require('webpack-merge')
     5 const common = require('./webpack.common.js')
     6 const webpack = require('webpack')
     7 
     8 
     9 // const express = require('express')
    10 // const app = express()
    11 // const appData = require('./src/assets/data/menuData.json')
    12 // const userList = require('./src/assets/data/userList.json')
    13 // var apiRoutes = express.Router()
    14 // app.use('/data', apiRoutes)
    15 
    16 module.exports = merge(common, {
    17     // 有助于代码调试
    18     // 开启后,控制台会显示错误所在的具体js文件
    19     // 生产环境下不要使用
    20     devtool: 'inline-source-map',
    21     mode: 'development',
    22     devServer: {
    23         contentBase: './dist',
    24         // before(app){
    25         //   app.get('/data/menuData',(req,res)=>{
    26         //     res.json({
    27         //       errno:0,
    28         //       data:appData
    29         //     })
    30         //   }),
    31         //   app.get('/data/userList',(req,res)=>{
    32         //     res.json({
    33         //       errono:0,
    34         //       data:userList
    35         //     })
    36         //   })
    37         // },
    38         proxy: {
    39             '/api': {
    40                 // target: 'http://192.168.0.111:8080',//设置你调用的接口域名和端口号 别忘了加http
    41                 // target:'http://192.168.0.101:8081',//集成环境
    42                 target: 'http://192.168.0.103:8081',//本地环境
    43                 changeOrigin: true,
    44                 pathRewrite: {
    45                     '^/api': ''//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
    46                 }
    47             }
    48         },
    49         open: false
    50     },
    51     // plugins: [
    52     //     new webpack.DefinePlugin({
    53     //         'process.env.NODE_ENV': JSON.stringify('development')
    54     //     })
    55     // ]
    56 });
    

    View Code

    webpack.prod.js的配置

    图片 20图片 21

     1 /*
     2   生产环境配置
     3 */
     4 const merge = require('webpack-merge')
     5 const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
     6 const common = require('./webpack.common.js')
     7 const CleanWebpackPlugin = require('clean-webpack-plugin')
     8 // const webpack = require('webpack')
     9 module.exports = merge(common, {
    10     //关于source-map,官网中的解释看不明白,以后再说
    11     devtool: 'source-map',
    12     mode: 'production',
    13     plugins: [
    14         new CleanWebpackPlugin(['dist']),
    15         new UglifyJSPlugin({
    16             sourceMap: true
    17         }),
    18         // new CleanWebpackPlugin(['dist']),
    19         // new webpack.DefinePlugin({
    20         //     'process.env.NODE_ENV': JSON.stringify('production')
    21         // })
    22     ]
    23 })
    

    View Code

     

    本次的工程以Vue.js为主演,Vue.js是1款Mini优雅同期有力的轻量级mvvm框架,合作webpack模块化打包。制作出如下图的功能。仅仅搭1个框架,会用上海重机厂重插件和加载器。

    webpack的基础知识能够参谋官方文书档案:webpack国语官方网址

    编写翻译完结,能够看来上述的目录,common为集体提取的模块,style是公家提取的css文件,index.js,逻辑入口。项目打包实现。

    3、webpack-merge模块的应用

      能够使webpack的配备文件具备近乎于继续的关系。而前者项目标构建是要分条件的,譬如开荒情形、正式情况。大家得以将通用的布局抽出为common配置,然后让开垦处境与标准碰到的布署分别承袭自common,那样好维护

    name: (new) 
    version: (1.0.0) 
    description: 
    entry point: (index.js) 
    test command: 
    git repository: 
    keywords: new
    author: fz
    license: (ISC) 
    
    
    {
     "name": "gt",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
      "test": "echo "Error: no test specified" && exit 1"
     },
     "keywords": [
      "new"
     ],
     "author": "fz",
     "license": "ISC"
    }
    
    Is this ok? (yes) 
    

    一、新建webpack配置文件

    在工程的根目录下,新建如下文件

    webpack.common.js:通用配置。首假若entry、output、loader、插件的安插

    webpack.dev.js:开辟意况的配置。首要布署devtool、代理等新闻

    webpack.prod.js:生产条件的布局。

    图片 22

    在工程目录下命令行输入

    本文由68399皇家赌场发布于集群主机,转载请注明出处:细说前端自动化打包工具--webpack

    关键词: 68399皇家赌场 前端 webpack 文档教程