首页 > Web开发 > 详细

关于webpack

时间:2019-09-23 22:21:03      阅读:88      评论:0      收藏:0      [点我收藏+]

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

原文:https://www.cnblogs.com/clover-liu/p/11574644.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!