一：配置

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. MySQL Replication--多线程复制MTS

    多线程复制 多线程复制MTS(Mult-Threaded Slave Applier)指使用多个线程来并发应用二进制日志.在MYSQL5.6版本中,多线程复制基于schema来实现,将多个数据库下的事 ...

  2. 2013.9.3 - OpenNER第十一天

    下午接受了天猫某高管的交叉面试,在图书馆电面的,感觉面的不怎么好,他先问了我飞天的情况,还有我做了什么,他感觉和我聊不到一起去,我感觉应该是下午在地下铁喝的那杯咖啡让我慌了神,后来他又问了大数组抽取最 ...

  3. 排序接口与抽象类(java)

    定义一个ISort接口,方法有升序(sortAsc),有降序(sortDesc),传入参数是一个实现Comparable接口的对象数组,即不仅仅只对数字排序,还定义了两个默认方法: compare方法 ...

  4. LGOJP1850 换教室

    题目地址 https://www.luogu.org/problem/P1850 题解 这题的转移其实挺好想的但是方程特别长...真的特别长... 首先设\(f[i,j,0/1]\)表示当前在第\(i ...

  5. poi读写doc和docx

    https://www.cnblogs.com/always-online/p/4800131.html POI是 Apache 旗下一款读写计算机中的 word 以及 excel 文件的工具. po ...

  6. redis node 常用命令

    命令窗口 flushall //清空全库 keys * //查看所有 HMSET user1 name liujinyu age 25 //哈希 添加多个值 HSET user1 sex man // ...

  7. Djiango-建立模型抽象基类

    创建一个抽象模型基类 ‘ 然后 ’base_model.py from django.db import models from datetime import date class BaseMode ...

  8. Python 代码混淆和加密技术

    动机 Python进行商业开发时, 需要有一定的安全意识, 为了不被轻易的逆向. 混淆和加密就有所必要了. 混淆 为了增加代码阅读的难度, 源代码的混淆非常必要, 一个在线的Python代码混淆网站. ...

  9. python 格式化输出%s %f %d

    格式说明由%和格式字符组成,如%f,它的作用是将数据按照指定的格式输出.格式说明是由“%”字符开始的. 1.整型输出%d print 'my age is %d'% (26) 说明:%d相当于是一个占 ...

  10. [USACO 09FEB]Bullcow

    Description 题库链接 有 \(n\) 头牛,每头牛可以为 \(\text{A}\) 牛也可以为 \(\text{B}\) 牛.现在给这些牛排队,要求相邻两头 \(\text{A}\) 牛之 ...