webpack

是一个模块打包器，能够把所有的文件都当做是一个模块

它把所有的文件资源(js,json,css,sass,图片)都看作为模块

将这些文件资源解析处理以后，生成对应的打包文件

使用webpack构建一些应用也是非常方便，比如基于

node webpack vue-cli构建vue程序(脚手架)

webpack是一个基于node.js运行环境，用于打包本地文件

之间相互依赖并最终输出成单个文件的工具，就像npm工具可以下载安装包一样

webpack能够帮助我们解决

1.打包js文件

 文件结构
   dist目录
   src目录
     app.js
     1.js
   index.html

npm init -y

装包 webpack

npm install webpack@3 -g

打包

webpack 源文件路径打包到新文件路径

webpack ./src/app.js ./dist/bundle.js

在index.html中引入打包后的文件路径

配置行命令繁琐

在新项目根目录下新建一个文件:webpack.config.js

2.打包json文件

直接暴露，然后引入即可，js插件解决

3.打包css文件

安装：npm i style-loader css-loader -D
创建style.css 并书写相关样式
app.js中引入：require('./style.css')或者 import css from './style.css'//引入时加后缀名

配置在webpack .config.js 加入

 module:{
        rules:[{
            test:/\.css$/,//解析css
            use:['style-loader','css-loader']//从右向左解析
        }]
    }

在cmd 运行webpack进行打包

4.打包css中的图片

安装:npm i url-loader file-loader -D

配置webpack.config.js （放在reules配置css下面）

  use:[{
                 loader:'url-loader',
                 option:{
                     limit:8192,
                     
                 }
             }]

运行cmd webpack打包

5.打包处理页面里面的img标签

安装 npm install html-withimg-loader --save

运行 webpack.config.js中配置modules.rules（放在图片下面)

 {
   test:/\(htm|html$/i,
   loader:'html-withimg-loader'
 }

使用插件html-webpack-plugin

需要下载webpack到本地

npm install --save-dev webpack@3
下载包

npm i html-webpack-plugin -S

插件放在module 后面

 配置
     filename
   就是html文件的文件名，默认是index.html
   template
   指定你生成的文件所依赖哪一个html文件模板，模板类型可以是html、jade、ejs等
   。但是要注意的是，如果想使用自定义的模板文件的时候，你需要安装对应的loader哦。
   //引入 
   var htmlWebpackPlugin = require('html-webpack-plugin')
   
   //插件 放在module 后面
   plugins:[
         new htmlWebpackPlugin({
             //生成的html文件 不用指定输出目录 因为出门文件已经设置
             filename:"a.html",
             //已经有的html 模板 
             template:"./index.html" //打包页面
         })
     ]

压缩js

 为什么要压缩？
 压缩文件可以减少文件大小，可以去除不必要的空格和换行，对于图片文件
 可以把质量调低，文件大小 小了，网络字节量也就小了，用户下载速度就
 会变快

如果是新建的文件目录：那么需要初始化：

npm init -y

安装webpack@3.1.0
- npm i --save-dev webpack@3.1.0

 webpack.config.js文件中新添加一个插件
     var  webpack = require("webpack");
   //plugins: [new webpack.optimize.UglifyJsPlugin() // 压缩js文件]
     plugins:[
         new htmlWebpackPlugin({
             //生成的html文件 不用指定输出目录 因为出门文件已经设置
             filename:"a.html",
             //已经有的html 
             template:"./index.html"
         }),
         new webpack.optimize.UglifyJsPlugin(), //压缩js文件
         //单独打包 生成的路径的
        // new ExtractTextPlugin("style.css"),
        //压缩
        // new OptimizeCssplugin()
     ]

运行cmd 进行压缩

压缩css文件

安装包:npm i --save-dev extract-text--webpack-plugin@3.0.2
安装压缩css文件的插件
- npm install --save-dev optimize-css-assets-webpack-plugin@3.2.0
在webpack.config.js中配置

压缩图片文件

新建文件目录

dist

src

加载图片

1.jpg

app.js：引入图片

webpack.config.js配置文件
初始化:
- npm init -y
安装包
- npm i --save-dev url-loader@1.1.2 file-loader@2.0.0 image-webpack-loader@4.6.0
安装webpack到本地
- npm i --save-dev webpack@3
在index.js导入这章图片
- import "./1.png"
运行cmd webpack进行打包压缩

雪碧图

dist

src

icons 图标

app.js

index.html

初始化包
- npm init -y
安装
- npm install webpack-spritesmith@1.0.0
安装webpack
- npm install webpack@3 --save-dev
安装 html-webpack-plugin插件
- npm i --save-dev html-webpack-plugin@3.2.0
安装导入
- const WebpackPlugin = require('html-webpack-plugin')
- const Spritesmith

 target :{
   //生成雪碧图（大图）文件存放路径
   image:path.resolve(__dirname,'dist/sprite/sprite.png'),
     css:path.resolve(__diname,'dist/sprite/sprite.css')
   
 },
   //样式文件中 雪碧图的写法 
  apiOptions:{
    al
  }

在根目录index.html中

 <link rel="stylesheet" href="./sprite.css">
   </head>
 <body>
    <div id="one"></div>
     <div id="two"></div>
     <div id="three"></div>
   
 </body>

在app.js中

 document.getElementById("one").classList.add("icon-4");
 document.getElementById("two").classList.add("icon-2");
 document.getElementById("three").classList.add("icon-right");

在webpack.config.js中配置

 在plugins下添加
    new WebpackHtmlPlugin({
             template:"./src/index.html"
         })

运行cmd webpack 将在 dist目录下生成一个文件夹和一个html，里面有打包的精灵图，打开html即可在网页中看到精灵图

关于webpack的更多相关文章

js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
细说前端自动化打包工具--webpack
背景记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

[系列] 使用 go modules 包管理工具（一）
目录概述初始化添加依赖包 go mod 命令小结源码地址概述我想实现一个开箱即用的 API 框架的轮子,这个轮子是基于 Gin 基础上开发的. 为什么是开箱即用,它会集成哪些功能? 以上 ...
unity编辑器扩展_06（给选项添加快捷键，控制菜单是否启用)
代码: [MenuItem("Tools/Delete ", true, 1)] static bool DeleteVadidate() { if (S ...
HDU 2147
题意略. 思路: 题中提到的3种操作,一个是将长方形的n减少1,一个是将m减少1,一个是将n和m同时减少1,都是将长方形规模减少的的操作. 现在我们可以知道,(1,1)先手必输:(1,2),(2,1) ...
Java基础之String、StringBuffer、StringBuilder浅析
Java基础之String.StringBuffer.StringBuilder浅析一.前言: 位于java.lang包下的String.StringBuilder.StringBuffer一般都是 ...
npm init,npm -y, npm install --save,npm install --save-dev
npm init 初始化一个简单的package.json文件,执行该命令后终端会依次询问 name, version, description 等字段 npm init --yes|-y 作用同上, ...
ASP.NET Core 2.2 : 二十七. JWT与用户授权（细化到Action）
上一章分享了如何在ASP.NET Core中应用JWT进行用户认证以及Token的刷新,本章继续进行下一步,用户授权.涉及到的例子也以上一章的为基础.(ASP.NET Core 系列目录) 一.概述 ...
快速掌握SPSS数据分析
SPSS难吗?无非就是数据类型的区别后,就能理解应该用什么样的分析方法,对应着分析方法无非是找一些参考资料进行即可.甚至在线网页SPSS软件直接可以将数据分析结果指标人工智能地分析出来,这有多难呢 ...
转载-springboot缓存开发
转载:https://www.cnblogs.com/wyq178/p/9840985.html 前言:缓存在开发中是一个必不可少的优化点,近期在公司的项目重构中,关于缓存优化了很多点,比如在加载 ...
爬虫——cookie模拟登陆
cookie适用于抓取需要登录才能访问的页面网站 cookie和session机制 http协议为无连接协议,cookie: 存放在客户端浏览器,session: 存放在Web服务器人人网登录案例 ...
2019DX#2
Solved Pro.ID Title Ratio(Accepted / Submitted) 1001 Another Chess Problem 8.33%(1/12) 1002 Beau ...

关于webpack