一：配置

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. 【Spring Boot】Spring Boot之自定义拦截器

    一.拦截器的作用 将通用的代码抽取出来,达到复用的效果.比如可以用来做日志记录.登录判断.权限校验等等 二.如何实现自定义拦截器 1)创建自定义拦截器类并实现HandlerInterceptor类 / ...

  2. Mariadb/MySQL多实例实战

    Mariadb/MySQL多实例实战 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装MySQL程序 无论你喜欢哪种方式安装均可,关于源码安装,yum安装或者二进制安装,可以 ...

  3. SQL进阶系列之10HAVING子句又回来了

    写在前面 HAVING子句的处理对象是集合而不是记录 各队,全队点名 --各队,全体点名! CREATE TABLE Teams (member CHAR(12) NOT NULL PRIMARY K ...

  4. 【原创】selenium+python+openpyxl实现登录自动化测试，自动读取excel用例数据，并将数据结果自动写入到excel

    # -*- coding: utf-8 -*- from selenium import webdriver from openpyxl import load_workbook from time ...

  5. 基于appium快速实现H5自动化测试

    一.下载Appium-Server及库文件 库文件:jar包:java-client-3.1.0.jar Appium-Server:Appium服务器: 注:Appium包含客户端和服务端,客户端就 ...

  6. python测试开发django-rest-framework-63.基于函数的视图(@api_view())

    前言 上一篇讲了基于类的视图,在REST framework中,你也可以使用常规的基于函数的视图.它提供了一组简单的装饰器,用来包装你的视图函数, 以确保视图函数会收到Request(而不是Djang ...

  7. 《基于C/S和B/S混合结构的中职学校教务管理系统设计与实现》论文笔记（十六）

    标题:基于C/S和B/S混合结构的中职学校教务管理系统设计与实现 一.基本信息 时间:2008 来源:中 国 海 洋 大 学 关键词:: 教务管理信息系统;C/S和B/S混合结构;UML;USE CA ...

  8. 鸡尾酒排序Cocktail Sort （双向冒泡排序）

    鸡尾酒排序 鸡尾酒排序思路,先从左边开始进行冒泡排序,第一趟冒泡排序完,最大值在的数组的最右端,然后进行第二趟排序,第二趟排序从右边开始排序,第二趟结束时,最小值在数组最左端,以此类推,每一趟排序完都 ...

  9. js判断是否第一次访问跳转

    今天分享一套关于Js劫持代码,进行判断第一次访问进行跳转,仅供大家参考学习! 未加密: if (c.indexOf('isfirstvisited=false') != -1) { } else { ...

  10. Linux——配置maven

    前言 Maven是一个项目管理工具,它包含了一个项目对象模型 (Project Object Model),一组标准集合,一个项目生命周期(Project Lifecycle),一个依赖管理系统(De ...