请选择 进入手机版 | 继续访问电脑版
查看: 137|回复: 2

webPack 4.0的零基础学习

[复制链接]
  • TA的每日心情
    开心
    7 小时前
  • 签到天数: 1574 天

    [LV.Master]伴坛终老

    4248

    主题

    6170

    帖子

    10万

    积分

    管理员

    IBC编程社区-原道楠

    Rank: 9Rank: 9Rank: 9

    积分
    108845

    推广达人突出贡献优秀版主荣誉管理论坛元老

    发表于 2019-11-8 09:54:46 | 显示全部楼层 |阅读模式

    马上加入IBC,查看更多教程

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    webPack 也更新到了4.0阶段,本日看了一下官网,总结一下,零底子的学习路径吧。
    (1)起首必要下载 webPake和webpack cli   
    1. npm install  webpack webpack-cli
    复制代码
    (2)下载完之后,则是创建新的文件夹,举行初始化
    1. //webpack 初始化npm init  
    复制代码
    (3)完成之后,则是从零设置webpack  必要在根目次下,创建一个 webpack.config.js 的文件,内里用来写webpack 的设置
    095713t3xkk42wn0o2q24w.png


    (4)设置webpack 由于webpack 是基于node.js 运行的,以是起首必要在文件里设置
    095713lrp8o4no8yp5h58e.png


    (5)众所周知,webpack 的工作机制就是把一堆文件打包成 浏览器所熟悉的html 和js 和 css,那么就必要打包的入口文件和打包之后的出口文件夹啊
    1. mode: "production", //模式有两种  production development    entry: './src/index.js', //入口    output: {        filename: "build.js", //打包后得文件名  [hash:8]  文件名只体现hash得前8位        path: __dirname + '/build', //绝对路径 },
    复制代码
     这里的解释都相当清晰了,以是就不逐一表明了,production 是生产模式(也就是上线的版本);development 是开辟模式
    (6)到了这一步,最底子的就完成了,我们就可以做一个测试了,新建一个src文件夹,在内里创建一个index.js ,输入一点东西,然后运行webpack 则会望见他主动打包成buil文件夹,并在内里天生index.js

    095714mz0k1qzikii1a65a.png



    这个意味着打包乐成
    095714b4coaoogc9picuqj.png



    (7)但是是不是有什么不对呢?那里不短冖呢?如果我想让他天生index.html文件呢?怎么天生?------那么就必要用到插件了  
    html-webpack-plugin 这个插件可以在build 文件夹下主动天生index.html  (起首我们必要在下令行中下载这个插件 然后再将其设置到webpack.config.js文件中)  
    1. //下载插件npm add  html-webpack-plugin
    复制代码
    然后则是在设置文件中举行引用
    plugins  这个属性是放置全部用到的插件
    095714mmzz56ik7meut5m6.png


    运行乐成之后则会主动加载出文件(并且还会主动引入build 文件夹下面的js 文件)
    095715w636tw2bkjxjj1fh.png




    (8)那么如果又css 文件呢?哪有改怎样去打包呢?中心又会涉及到那些标题呢?
    css 文件,我们就必要用到 loader (他的作用就是将浏览器不熟悉的文件转换成所熟悉的js或css文件)
    loader 的工作机制序次是: 从右向左,从上往下
    css 文件中,我们用到的是 css-loader 和style-loader 以是我们应该先下载下来,然后再举行设置
    这里我们必要留意的是,在src 文件中,我们在index.js 中引入css 文件时应该用 require 的方式来引入
    095715ogbclbmgoiohcggg.png

    如许我们可以见已经打包乐成了
    095716kw4c0q0dffdvlijk.png




    (9)那么,标题又来了,既然js 都可以单独打包成一个文件,css 是不是也可以呢
    mini-css-extract-plugin  这个插件,则是会主动天生一个css 文件,将其插入在 link 标签内里    之后我们必要的就是在设置文件中举行设置就ok了

    095716bu5xz42epcx2u375.png


    (10)细致的你会发先又有个小小的标题(就是纵然在生产模式下,js 文件被压缩成一行了,但是天生的css 却没有呢?这又怎么管理呢)
    这时间必要两个插件来管理
    1. let OptimizeCss = require('optimize-css-assets-webpack-plugin'); //这个插件可以压缩css文件let UglifyJs = require('uglifyjs-webpack-plugin') //有了css 压缩必须加上这个js压缩 否则 js 文件不会别压缩
    复制代码
    095716bol1h3os2hr2osoo.png


    (11)这些都弄完了,那么如果是时css 文件中又图片呢? js 文件中有图片呢?那咋整?咱下次再接着说。。。
    (12)咦~ 插播一个小小的知识点,各人都知道vue 是集合了webpack 的,打包时直接 npm run build  就好了,那你知道咋设置的吗?
    095717ec224upc8rbn8wcz.png


    OK,这次真拜拜了~~~~
    C#论坛 www.ibcibc.com IBC编程社区
    C#
    C#论坛
    IBC编程社区
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则