一：配置

1.配置文件

　　每次修改main文件，重新打包都要指定入口与出口，比较费事，可以使用配置文件的方式

　　在根目录下新建webpack.config.js：

const path = require('path')

module.exports = {

    entry:path.join(__dirname,'./src/main.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js'

    }

}

　　

2.再操作

　　

二：自动打包

1.自动打包编译的功能

　　使用webpack-dev-server工具

　　

　　这个是在本地项目中安装的，所以，无法把它当做脚本命令，在powershell终端中运行。

　　所以修改package.json：

　　

　　

2.运行npm run dev

　　如果报错，则：

　　npm install  -D webpack-cli

　　再次运行：

　　

3.修改

　　看上面的日志，webpack output is server from /

　　但是在本地的磁盘中却找不到，因为是生成在内存中。

　　如果不修改，虽然重新编译了，但是没有效果，所以，这里还是需要修改。

　　

三：webpack-dev-server的常用命令

1.打包结束之后，自动打开浏览器

　　

2.修改端口

　　

3.直接进入src页面

　　

　　重新启动的效果：

　　

4.热加载

　　不需要重新加载页面，修改完后，页面自动的刷新

　　

四：html-webpack-plugin

1.在内存中生成首页

　　安装html-webpack-plugin

　　

　　然后修改配置文件：

　　

2.打开源代码

　　

　　会发现另一个作用：插件自动把打包好的js插入到页面中。

3.运行

　　

五：处理样式

1.基本处理方式

　　

　　效果：

　　　　先npm run dev

　　　　

2.使用loader的方式

　　1.安装loader

　　

　　2.在webpack.config.js中配置节点

　　　　增加module。

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    entry:path.join(__dirname,'./src/main.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js'

    },

    plugins:[

        new htmlWebpackPlugin({

            template:path.join(__dirname,'./src/index.html'),

            filename:'index.html'

        })

    ],

    // 用于配置所有的第三方模块加载器

    module:{

        //匹配规则

        rules:[

            {test:/\.css$/,use:['style-loader','css-loader']}  //正则

        ]

    }

}

　　3.使用

　　

　　4.运行

　　　　npm run dev

　　　　修改完css，马上反应到页面。

3.less文件的loader

　　1.增加less的处理器

　　

　　2.增加规则

　　

　　3.引用

// js的主要入口

import $ from 'jquery'

import './css/index.css'

import './css/index.less'

$(function(){

    $('li:odd').css('backgroundColor','blue')

    $('li:even').css('backgroundColor',function(){

        return '#'+'fff'

    })

})

　　4.启动

4.处理图片

　　1.安装loader

　　

　　2.修改配置

　　

　　3.使用

　　

　　4.图片编码

　　　　图片的url会被编码。可以使用配置的方式，修改。如果图片的大小大于设置的数值，就不会被编码。

　　　　

　　5.防止图片重名

　　　　使用hash

　　　　

　　　　效果：

　　　　

六：字体图标处理

1.使用bootstrap

　　

2.装包

　　

3.引用

// js的主要入口

import $ from 'jquery'

import './css/index.css'

import './css/index.less'

import 'bootstrap/dist/css/bootstrap.css'

$(function(){

    $('li:odd').css('backgroundColor','blue')

    $('li:even').css('backgroundColor',function(){

        return '#'+'fff'

    })

})

　　

4.在程序中使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <!-- <script src="/bundle.js"></script>   使用内存的方式加载页面 -->

    <!-- <link rel="stylesheet" href="./css/index.css">  使用loader加载器 -->

</head>

<body>

    <ul>

        <li>1111111111</li>

        <li>2222222222</li>

        <li>3333333333</li>

    </ul>

    <div class="di"></div>

    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>

</body>

</html>

　　

5.修改配置文件

　　因为托管问题

　　

6.修改处理文件的loader

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    entry:path.join(__dirname,'./src/main.js'),

    output:{

        path:path.join(__dirname,'./dist'),

        filename:'bundle.js'

    },

    plugins:[

        new htmlWebpackPlugin({

            template:path.join(__dirname,'./src/index.html'),

            filename:'index.html'

        })

    ],

    // 用于配置所有的第三方模块加载器

    module:{

        //匹配规则

        rules:[

            {test:/\.css$/,use:['style-loader','css-loader']},  //正则

            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},  //依次往前处理

            {test:/\.(jpg|png|bmp|jpeg)$/,use: 'url-loader?limit=983&name=[hash:9]-[name].[ext]'},

            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }// 处理 字体文件的 loader

        ]

    }

}

　　

7.效果

　　

　　

008 webpack的其他使用方式的更多相关文章

  1. webpack的正确安装方式

    webpack是基于node开发的模块打包工具,所以他本质上是由node实现的. 我们要保持node版本尽量的新,另一个要保持webpack版本尽量的新,高版本的webpack会利用新版本中的一些特性 ...

  2. webpack学习最基本的使用方式（一）

    网页中引入的静态资源多了以后会有什么问题.? 1.网页加载速度慢,因为我们要发起很多的二次请求 2.要处理错综复杂的依赖关系 如何解决上面的问题 1.合并,压缩图片,使用精灵图 2.可以使用之前学过的 ...

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

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webpack中hash与chunkhash的区别，以及js与css的hash指纹解耦方案

    文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...

  5. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  6. Webpack 入门指南 - 1.安装

    Webpack 是目前流行的打包工具,如何安装它呢? 1. 安装 Node Js 首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统 ...

  7. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  8. Webpack教程一

    比较 如果你熟悉原来一系列的构建工具,grunt或者gulp之类的,这里有一篇webpack和他们比较的文章可以读一读. Webpack Compared 安装 先装好node和npm,因为webpa ...

  9. webpack性能优化——DLL

    Webpack性能优化的方式有很多种,本文之所以将 dll 单独讲解,是因为 dll 是一种最简单粗暴并且极其有效的优化方式. 在通常的打包过程中,你所引用的诸如:jquery.bootstrap.r ...

随机推荐

  1. linux中apt-get使用

    apt-get简介 在Ubuntu系统中,经常要用到apt-get install指令来安装软件,由于常常需要root权限来操作,所以搭配sudo食用口感更佳,apt-get指令对于安装.卸载.升级软 ...

  2. Altium Designer常用快捷键总结

    一.PCB中常用快捷键 ● R+L 输出PCB中所有网络的布线长度 ● Ctrl+左键点击 对正在布的线完成自动布线连接 ● M+G 可更改铜的形状; ● 按P+T在布线状态下,按Shift+A可直接 ...

  3. C++（五十一） — 容器中常见算法（查找、排序、拷贝替换）

    1.find(); find()算法的作用是在指定的一段序列中查找某个数,包含三个参数,前两个参数是表示元素范围的迭代器,第三个参数是要查找的值. 例:fing(vec.begin(), vec.en ...

  4. ArcGIS pro 发布地图服务（一）动态地图服务

    1.软件:arcgis pro 2.4  数据:.mxd文档. 2.导入mxd文档. 3.登录portal账号 4.分析—发布 5.在server中的地图服务 JavaScript api 查看 6. ...

  5. 2018-2019 ACM-ICPC, Asia Xuzhou Regional Contest- H. Rikka with A Long Colour Palette -思维+贪心

    2018-2019 ACM-ICPC, Asia Xuzhou Regional Contest- H. Rikka with A Long Colour Palette -思维+贪心 [Proble ...

  6. 自动化测试常用断言的使用方法（python+selenium）

    自动化测试常用断言的使用方法(python) 自动化测试中寻找元素并进行操作,如果在元素好找的情况下,相信大家都可以较熟练地编写用例脚本了,但光进行操作可能还不够,有时候也需要对预期结果进行判断. 这 ...

  7. 实验八 《Coderxiaoban团队》团队作业4：基于原型的团队项目需求调研与分析

    实验八 <Coderxiaoban团队>团队作业4:基于原型的团队项目需求调研与分析 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 实验八 团队作业4:基于 ...

  8. C define详解

    1.简单的define定义 #define MAXTIME 1000 一个简单的MAXTIME就定义好了,它代表1000,如果在程序里面写 if(i<MAXTIME){.........} 编译 ...

  9. 2019牛客国庆集训派对day1 K题 双向链表练习题 splay区间翻转

    题目链接: 解法: 先建n颗平衡树,合并的时候将a中最右的结点翻转到根节点,b中最左的结点翻转到根节点,对合并后的根节点进行标记. #include <bits/stdc++.h> usi ...

  10. LeetCode 1093. Statistics from a Large Sample

    原题链接在这里:https://leetcode.com/problems/statistics-from-a-large-sample/ 题目: We sampled integers betwee ...