一：配置

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. php的多功能文件操作类

    本类为文件操作类,实现了文件的建立,写入,删除,修改,复制,移动,创建目录,删除目录,列出目录里的文件等功能,路径后面别忘了加"/" 创建指定路径下的指定文件 * @param s ...

  2. django模板和静态文件

    1.为什么要使用模板 在上一篇博文中,提到了HttpReponse,但是HttpReponse只能传送字符串,如果要构建一个网页,那么工作量就会十分巨大.模板是一种方便的标签,存在于HTML文件中,我 ...

  3. Kotlin协程作用域与构建器详解

    在上次我们是通过了这种方式来创建了一个协程: 接着再来看另一种创建协程的方式: 下面用它来实现上一次程序一样的效果,先来回顾一下上一次程序的代码: 好,下面改用runBlocking的方式: 运行一下 ...

  4. Zepto.js简介

    Zepto.js简介 一.总结 一句话总结: Zepto.js语法和jquery起码百分之90相似,主要做移动端框架,和jquery mobile是一个类型的概念 1.Zepto.js做移动端的特点? ...

  5. nginx的alias与root的区别

    root的写法: location /request_path/image/ { root /local_path/image/; } 这样配置的结果就是当客户端请求 /request_path/im ...

  6. django-自定义文件上传存储类

    文件储存API:https://yiyibooks.cn/xx/django_182/ref/files/storage.html 编写自定义存储系统:https://yiyibooks.cn/xx/ ...

  7. MyBatis框架的insert节点-向数据库中插入数据

    需求:使用mybatis框架中的insert元素节点向数据库中插入数据 UserMapper.xml UserMapper.java 编写测试方法: @Test public void testAdd ...

  8. ReactiveX 学习笔记（30）操作符辨析

    RxJava: merge/concat/switch RxJS: merge/concat/switch/exhaust RxSwift: merge/concat/switchLatest mer ...

  9. tf.logging.set_verbosity

    tf.logging.set_verbosity (tf.logging.INFO) 作用:将 TensorFlow 日志信息输出到屏幕

  10. 学到了林海峰,武沛齐讲的Day49 django

    django 终于等到啦,好东西上场了 blog---- 个体应用文件 model.py 数据库文件 views.py 视图文件 admin.py 后台文件,操纵数据库文件 manage.py --- ...