图片 1

前言

少侠,愿你页底归来,已习得webpack精要。

有多少关怀,就有多少非议,那是社会常态,用在小车行业也这样,像是一贯异常的红的五菱汽车SHighlander9,当它壹袭华裳引爆人们的眼珠鸡时,就注定了它十分受关心,以致是被网上朋友作弄为保时泰,1度成为热点网络红人车。而它,也用自身品质和服务态度表明,有实力自然会被善待。

新近正在商量webpack,听他们讲webpack能够本身搭建多个小型的服务器(使用过vue-cli的相恋的人应该都见识到过),所以急忙的想要尝试一下。但是,在实操中发觉,用webpack搭建服务器仍有那多少个坑,壹方面是出于自个儿对文书档案的面生,不领悟webpack-dev-server的运行形式;另壹方面,在阅读了数不尽博客和小说后,发掘许多配备实际上都跑不起来(有希望是本子的原因,也有相当的大或然是自己要好安排的缘故)。所以小编筹算用webpack三.0把dev-server跑起来给大家演示3回,顺便把一部分布署和公理给大家讲理解,那样就省的绕弯路了。

图片 2

那多少个你熟识的定义

图片 3

那2个你精通的定义

图片 4

此处小编就私下认可我们都早已安装了webpack以及和谐索要运用的loader和plugins,由于webpack-dev-server是个单身的npm包,所以我们需求在npm下安装它: 

《webpack四.0各种击破类别》适合不满意于只会布署webpack但转眼又看不懂源码的高中级读者。小编无奈保险这几个种类是最棒的,但最少能确定保障每一篇博文都跟那个Ctrl+CCtrl+V的博文有实质的区分,不信你读读看。

输入源点

  • 保时泰之外,配置之外你应该知道的事。字符串语法

module.exports = {
    entry: './usage/index.js'
}
  • 数组语法
    向 entry 属性传入「文件路线(file path)数组」将开创八个主入口

module.exports = {
    entry: ['./plugins/hello.js','./usage/index.js']
}

问题:数组语法跟主入口文件引进正视文件有如何差距?

  • 目标语法

module.exports = {
    entry: {
        "usage.index": './usage/index.js',
        "usage.main": './usage/main.js'
    }
}
npm install webpack-dev-server --save-dev

一.webpack是什么

中文版官方网址:www.webpackjs.com

webpack是前者最火的包装工具,是大前端自动化学工业厂的首要组成都部队分。上面的LOGO已经分外形象地球表面述了webpack所做的最关键的职业——打包,纵然它为万分多的工具提供了适配接口,但官方网站依旧推荐将webpack用作自动化学工业具链的1有个别集成进更大的工具系统,而不是将总体须求的兑现都寄希望于webpack

输出

const path = require('path');
module.exports = {
    entry: {
        "usage.index": './usage/index.js',
        "usage.main": './usage/main.js'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'usage/dist/js'),
        publicPath: '/js/'
    }
}

说明:
publicPath:证明能源对外链接,如上安插能够通过<script
src=”/js/usage.index.js”>
去拜谒你的js能源。

事后大家就足以在webpack.config.js中张开安插:

2.webpack四.0各种击破类别

《webpack4.0各类击破连串》是小编原创的webpack四.0使用指南,它并不像别的科目那样一步一步贴着图来演示配置情势,而是通过问题+推演的方法,从包装须求减轻的难题,对应的拍卖政策,以及webpack相关的片段布置和法则等实行归咎讲授。假设您还尚无动用过webpack,那么提出您先读书官方文书档案和某些入门级的安插教程(它们恐怕早已过时了,社区里针对webpack肆.0以上版本的博文并不多,而且大多都只是在重复官方网址已经宣示过的难点)。假设你想从“为何”的框框上通晓webpack,那么阅读本连串一定会带给你获取。

  • 《Webpack4.0各样击破(一)html篇》

  • 《Webpack4.0种种击破(2)css篇》

  • 《Webpack4.0各种击破(三)assets篇》

  • 《Webpack四.0各样击破(4)javascript & splitChunks篇》

  • 《Webpack四.0种种击破(5)module篇》

  • 《Webpack四.0种种击破(6)loader篇》

  • 《Webpack四.0各样击破(柒)plugin篇》

  • 《Webpack四.0各种击破(八)tapable篇》

  • 《Webpack肆.0各样击破(玖)karma篇》

  • 《Webpack4.0各样击破(十)integration篇》

加载器(Loaders)

loader是对应用程序中的能源拓展改换。他们是函数,能够将文件资源作为参数来源,经过一番甩卖后再次回到性的文书能源。类似于fis叁要么gulp中的插件

  • 通过webpack.config.js配置

const path = require('path');
module.exports = {
    entry: {
        "usage.index": './usage/index.js',
        "usage.main": './usage/main.js'
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'usage/dist/js'),
        publicPath: '/js/'
    },
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader?modules',
        ]
    }]
}
  • 通过require或CLI

require('style-loader!css-loader?modules!./styles.css');

webpack --module-bind jade --module-bind 'css=style!css'

说明:webpack通过「!」区分加载器。

  • 加载器是何等分析的?
    loader遵从标准的模块解析,繁多动静下,从模块路线解析(平日将模块路线以为是npm
    install 的node_module路径)。
const path = require("path");
module.exports = {
   entyr:{
      ....... //设置入口文件
   },
   output:{
      ....... //设置出口文件
   },
   module:{
      ....... //配置loader,注意使用rules而不是loaders
   },
   plugins:[
      ....... //注意是数组
   ],
   devServer:{
      //我们在这里对webpack-dev-server进行配置
   }        
}
网站地图xml地图