webpack笔记一：webpack的介绍，安装，加载css、图片、字体等

时间  2019-11-10
标签 webpack 笔记 介绍 安装 加载 css 图片 字体 栏目 CSS 繁體版
原文   原文链接

写在前面的话：

在当前grunt、gulp、webpack成为平常工具的状况下，若是你还只是熟练的使用html、css和激块瑞的话，已经远远不能知足项目的需求，因此你得变强，你须要懂得更多。如今前端不只仅是用那几句蹩脚的JavaScript代码在浏览器渲染几个页面而后提交几个表单在写点交互了。如今WebGL协议能够为HTML5 Canvas提供硬件3D加速渲染，你能够用JavaScript语法能够渲染3D模型，你也能够用nodejs搭建后台，还能够用react-native、weex作一个app。js发展的也愈来愈像后台语言，毕竟js已经将它的魔爪伸到了不少领域，这让你能够猥琐欲为。。。确实每一个前端都应该有一统前端界的野心，寄人篱下只是暂时的 ⌒_⌒....javascript

1、webpack安装及概念

webpack是现代JavaScript应用程序的静态模块打包工具，webpack是经过npm来安装的，npm是跟node一块儿下载的包管理工具，因此你得保证电脑上已经安装了node。在安装以前先来讲下cnpm，由于npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，那下载速度让人不禁得喊一声“王德发”，因此咱们‘伟大的’淘宝团队干了一件伟大的事：“这是一个完整 npmjs.org 镜像，你能够用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽可能与官方服务同步。” 你只要执行如下命令：css

$ npm install -g cnpm

用了cnpm以后那速度让人爽得不要不要的，不再用担忧摔键盘的问题了。html

那么下面就来介绍一下webpack的安装，安装包括本地安装和全局安装（我用的是webpack4版本）：前端

全局安装（全局安装是安装到你C盘里，在任何地方均可以使用）：java

cnpm i webpack -g

本地安装（是安装到当前目录，只能在当前目录使用）：node

cnpm i webpack -D //i 是install 的缩写

若是你想安装webpack特定的版本，好比说2.2：react

cnpm i webpack@2.2 -D

在之前的版本中webpack和webpack-cli是一体的，但在webpack4中，它把webpack和它的cli分开来以方便于管理，因此还须要安装：webpack

cnpm i webpack-cli -D

到这里咱们已经怀着美滋滋的心情介绍完webpack的安装方法了，如今介绍一下webpack的基本概念，它的基本概念有四个，是的只有四个，你没有看错（是否是很高兴？你高兴的太早了）：git

  • 入口（entry）
  • 输出（output）
  • loader
  • 插件（plugins）

咱们来简单说一下家伙的功能先李姐李姐：

entry：顾名思义就是入口，就好像一个口袋的袋口，要装东西（好比说一支笔）进去就要经过这里。github

output：确定就是出口啦，你把一个装笔的袋子拿绳子捆起来后放到一个地方，这个地方就是出口。

loader：这个单词的意思是装货的人，那么在这里就是指的是那个装笔的人，意思是由于笔不可能本身跑进袋子里，须要一我的代劳。其实正确的解释是webpack自身只能理解javascript，它不认识这支笔是什么东西，因此就须要loader告诉webpack这是一支笔，那么webpack就能理解这支笔了。

plugins：这个就是插件，咱们对插件确定很熟悉了，在项目中咱们用过不少各类各样的插件，它能够用来处理各类各样的任务。

2、一个简单的项目

介绍完了webpack的安装以及概念，让咱们释放一下蠢蠢欲动的心作一个小项目吧：

  • 让咱们新建一个文件夹
mkdir webpack_lesson_one
  • 进入到新建的文件夹内
cd webpack_lesson_one
  • 新建一个项目
npm init -y
  • 安装webpack以及webpack-cli
cnpm i webpack webpack-cli -D
  • 接下来咱们在根目录新建一个index.html和一个webpack的配置文件webpack.config.js以及一个资源文件夹src，完成以上流程之后咱们的目录应该是这个样子的：

clipboard.png

  • 咱们在src目录里面新建一个入口文件index.js，而后编辑文件如图：

clipboard.png

  • 而后咱们开始编辑webpack.config.js:
const path = require('path');

module.exports = {
    entry:{    //入口文件配置，固然这里能够配置多个入口文件，在此对象内增长增长键值对便可
        app: './src/index.js'
    },
    output:{    //出口文件配置
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    }
}
//path.resolve()是nodejs中的语法，拼接路径， __dirname表明项目根目录
  • 修改package.json文件增长"scripts"命令，以下：

clipboard.png

接下来在根目录的index.html中引入app.bundle.js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="dist/app.bundle.js"></script>
</body>
</html>
  • 接下来打开终端执行命令：
npm run build

接下来就是见证奇迹的时刻了，你的项目根目录会生成dist文件夹，浏览器运行index.html就会看到hello world！，那么咱们的一个超级森破的项目就这样完成了。

3、引入css、图片、字体

在介绍上面几个功能前先说一下项目目录的合理分配，一个合适的项目目录能够下降总体项目的依赖性，大大提升工做中的开发效率，因此资源管理必定作好。那么在src目录中新建components目录，而后新建文件以下：

|- /src
|- |- /components
|- |  |- /News
|- |  |- |- /img
|- |  |- |- index.js
|- |  |- |- style.css
|- index.js
  • 接下来咱们呢先安装style-loader和css-loader以及file-loader：
cnpm i style-loader css-loader file-loader -D
  • 下面在webpack.config.js中配置:
const path = require('path');

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']    //这里须要注意下，style-loader 必需要写在 css-loader 以前哟
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',    //能够重写css中引入图片部分
                            publicPath: 'dist/'    //能够从新生成图片到新的目录
                        }
                    }
                ]
            }
        ]
    }
}

咱们来修改src目录下的index.js

clipboard.png

编写News目录下的style.css文件

body{
    background: #fff url(img/banben.png) 0 0 no-repeat;
}

编写News目录下的index.js文件

import './style.css';

console.log('有一天我但愿站在这个世界的顶端说出八个大字：个人，个人，都是个人！');

如今你再运行npm run build命令，再运行index.html看看是否是这样的效果（啊，多么漂亮的图标啊！）：

clipboard.png

再看看里面加载的css：

clipboard.png

图片后面自动加上了参数，这就是上面的配置项name:'img/'+'[name].[ext]?[hash]'的做用。你能够去看看file-loader的使用方法，让咱们姿式一块儿涨，1(yao)3(san)一块儿装。

  • 那么引入字体也是一样的道理，编辑webpack.config.js文件：
const path = require('path');

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js', 
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']    //这里须要注意下，style-loader 必需要写在 css-loader 以前哟
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',    //能够重写css中引入图片部分
                            publicPath: 'dist/'    //能够从新生成图片到新的目录
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|otf|ttf)$/,
                use:['file-loader']
            }
        ]
    }
}
  • 在src目录下新建public文件夹，放入字体文件资源：

clipboard.png

  • 在src目录下的index.js引入字体css文件：

clipboard.png

  • 在index.html中添加字体标签：

clipboard.png

再去News里改变一下字体的大小，作人就是要大气一些：

clipboard.png

而后再npm run build一下看看字体图标已经加载出来了！！！

clipboard.png

4、图片的压缩以及旧文件的删除

咱们已经能加载图片了，那么试着压缩一下吧，毕竟浓缩的才是精华、O(∩_∩)O哈哈~。。另附直通车image-webpack-loader，一条龙式服务必须滴。
仍是老样子，固然仍是先安装image-webpack-loader

cnpm i image-webpack-loader -D

修改webpack.config.jsmodule里的rules：

module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[name].[ext]?[hash]',
                            publicPath: 'dist/'
                        }
                    },
                    {    //压缩图片要在file-loader以后使用
                        loader:'image-webpack-loader',
                        options:{
                            bypassOnDebug: true
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:['file-loader']
            }
        ]
    },

如今你npm run build以后看看dist文件夹内的banben.png和以前的图片大小对比，是否是小了一半，就是这么方便。

  • 还有咱们在作项目时不少时候都须要删除以前废弃的文件。举个栗子：如今咱们把上面的file-loader里的name参数变一下：
{
        loader:'file-loader',
        options:{
            name:'img/'+'[hash].[ext]', //把[name] 换成 [hash]
            publicPath: 'dist/'
        }
    }

这样咱们生成的文件是一个以哈希值命名的图片，当咱们改变原图片名字的时候再打包后会从新生成一个图片文件，可是以前生成的依然还在那里一动不动。这个时候咱们就须要用到clean-webpack-plugin了，固然这个是插件不是loader哟~ 那就让咱们来安装吧：

cnpm i clean-webpack-plugin -D
  • 同理配置一下webpack.config.js 
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');    //插件是须要引入的，这里可别忘了引入

module.exports = {
    entry:{
        app: './src/index.js'
    },
    output:{
        filename:'[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader', 'css-loader']
            },
            {
                test:/\.(jpg|png|gif|svg)$/,    
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'img/'+'[hash].[ext]',
                            publicPath: 'dist/'
                        }
                    },
                    {
                        loader:'image-webpack-loader',
                        options:{
                            bypassOnDebug: true
                        }
                    }
                ]
            },
            {
                test:/\.(woff|woff2|eot|ttf|otf)$/,
                use:['file-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist/img']) //数组内的是须要清理的目录
    ]
}

来来来，咱们npm run build一下，是否是你的img文件消失一下后又从新浮如今你的眼前了，若是没有消失过多是你的眼花了。
固然你还能够设置其它参数，详见clean-webpack-plugin

plugins:[
    new CleanWebpackPlugin(['dist/img'],{
        exclude: [ 'banben.png' ]    //这个配置意思就是不删除 img 文件里面的 banben.png 图片
    })
]

如今本期webpack笔记已经到此结束了，另附上github项目练习素材地址：https://github.com/zgf123/web...

5、知识小结

webpack遵循commonJs规范，每一个文件就是一个模块，有本身的做用域。在一个文件里面定义的变量、函数、类，都是私有的，对其余文件不可见。CommonJS规范规定，每一个模块内部，module变量表明当前模块。这个变量就是一个对象，它的exports属性就是对外的接口，所谓加载某个模块，其实就是加载这个模块的modules.exports属性。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程