一：配置

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. Oracle 数据类型比较规则

    数值 较大的值被认为大于较小的值.所有负数都小于零,所有正数都小于零.因此,-1小于100:-100小于-1. 浮点值NaN(not a number))大于任何其他数值,且等于自身. 日期时间值 较 ...

  2. 什么影响了mysql的性能-存储引擎层

    5.6版本以前默认是MyISam存储引擎,5.6版本之后默认支持的Innodb存储引擎,这两种也是最常用的. 存储引擎层 MyISAM 5.5之前版本默认存储引擎 存储引擎表由MYD和MYI组成 特性 ...

  3. Give root password for maintenance

    linux开机出现"Give root password for maintenance (or type Control-D to continue):" 出现这种情况一般为两种 ...

  4. Windows安装Redis（转！）

    转自https://www.cnblogs.com/wxjnew/p/9160855.html “现在我已经走到了人生的十字路口边了,我相信,在已走过的人生道路中,我一直知道其中哪一条是正确的,是的, ...

  5. ViCANdo新版本发布（PART1） | 点云库（PCL）集成

    激光雷达         随着智能驾驶技术的发展,激光雷达迅速的进入工程师的视野,不管是机械式.MEMS还是纯固态激光雷达,本质上都是以一定的速度扫描照射区域,在此过程中激光雷达不断的发出激光并接收反 ...

  6. C#使用ODP.NET（Oracle.ManagedDataAccess.dll）操作Oracle数据库

    在刚接触C#的时候由于公司使用的就是Oracle数据库,那么C#怎么连接Oracle数据库就成了首要去掌握的知识点了.在那时没有ODP.NET,但visual studio却对Oralce数据库的调用 ...

  7. charAt,charCode,fromCharCode区别

    1.charAt 返回字符串指定位置的字符 2.charCode 返回字符串指定位置字符Unicode编码 3.fromCharCode 用Unicode编码创建字符串 我们来看下例子 var str ...

  8. PS——使用切片工具切出透明图片

    前言 最近有点烦,不说话~ 步骤 首先要保证您的格式为PSD且底色为透明 参考线 标出参考线,方便后面划分 切图 保存 效果

  9. CentOS7.6使用Virt-manager创建虚拟机报错

    Virt-manager创建虚拟机遇到的一个问题解决 环境:centos7.6 系统内核:3.10.0-957.el7.x86_64 virsh version 根据库编译:libvirt 4.5.0 ...

  10. Hive 内置函数

    原文见:https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF 1.内置运算符1.1关系运算符 运算符 类型 说明 A ...