webpack 发布之后不显示图片_为什么webpack发布不显示数据 - CSDN
精华内容
参与话题
  • webpack打包后图片显示问题

    千次阅读 2018-05-04 13:22:42
    1、先解释一下这段配置代码的意思,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理,大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片...

    1、先解释一下这段配置代码的意思,test是正则匹配规则,匹配项目中所有的以正则规则结尾的格式的文件,然后通过url-loader进行处理,不大于10kb就会进行base64转码,就是将图片转为base65格式,如果超过10KB的图片就单独打包到utils.assetsPath(‘img/[name].[hash:7].[ext]’) 这个目录下,也就是static/img/图片名,

    2、注意相对路径标识’./’,我们知道img为html标签,他的路径是由index.html开始访问的,他走./static/img/'图片名'是能正确访问到图片的,所以img的路径没问题,然后app.css访问./static/img/'图片名'是访问错误的,因为在css目录下并没有static目录。这样就造成了路径访问失败的问题。(这就是背景图片没有显示的原因)

    3、解决方法:

    1. 检查config文件中的assetsPublicPath是否设置为’/’而不是’./’ 
      注意区分’/’为绝对路径,绝对路径从网站静态服务器根目录查询/static/img/图片,这样的路径就是正确的,如果设置为’./’,路径就变成了相对路径,相对路径会根据相对的文件目录来确定文件资源,会造成上面分析的问题

    2. vue-cli创建的vue项目,会自带一个static目录,将出错图片放在该目录下面即可(正确解决办法) 
      查看vue-cli创建项目的webpack配置文件可以找到一个将static目录拷贝到dist目录中。根据对资源的规划不同,将需要打包的资源放在src/assets目录中,不需要打包的资源放入static目录中。

    3. 背景图片的解决方法:background:url('../../assets/images/bg.png');被相对打包后变成了url('static/img/bg.png')所以我们必须保留css引用图片的正确路径即:url('../../static/img/bg.338948.png')  我们需要在build文件夹下的utils.js做一下修改添加这一行代码即可。

      关于base64

      优点:base64就是一串字符串码来表示的图片,在加载页面或者js的时候就一并加载过来,减少图片引用时单独的一次http请求。了解web端性能优化的同学都知道,http请求每次建立都会占用一定的时间,对于小图请求来说,可能http建立请求的时间比图片下载本身还长。所以对小图进行base64转码是优化http请求,保证页面加速渲染的一种手段。

      缺点:base64缺点就是之前提到的,他会增加图片本身的大小,对小图片来说,增加大小导致js的请求增长完全能弥补多一个http请求的建立的时长,这种取舍是划算的。可是对于大图来说,这样的取舍是不划算的。

    展开全文
  • Vue项目使用webpack打包发布到服务器

    千次阅读 2019-01-24 15:09:35
    vue开发的项目,使用webpack打包命令 npm run build 打包之后,部署到Tomcat启动之后出现部分图片不显示或其它问题,需要做如下修改。 1.修改config/index.js  build 节点的 assetsPublicPath属性由 '/' 改为 '....

    vue开发的项目,使用webpack打包命令  npm run build 打包之后,部署到Tomcat启动之后出现部分图片不显示或其它问题,需要做如下修改。

    1.修改config/index.js

     build 节点的 assetsPublicPath属性由 '/' 改为 './'

     

    修改 build/utils.js 文件

    generateLoaders函数中 添加  publicPath属性

     修改完毕再次执行命令 npm run build,部署到Tomcat之后图片能正常显示。

    展开全文
  • WebStorm下搭建webpack+vue开发环境

    千次阅读 2019-06-01 09:22:55
    工具安装 首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像地址。 1、安装淘宝镜像的命令为: ... 2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue的开发模板...

    工具安装

    首先安装一些必要的工具,由于npm的源都是在国外的地址,所以安装会比较慢,可以使用淘宝的国内镜像地址。 
    1、安装淘宝镜像的命令为:

    npm install -g cnpm --registry=https://registry.npm.taobao.org 

    2、然后安装全局vue-cli脚手架,用于帮助搭建所需的Vue的开发模板框架。命令如下:

    cnpm install -g vue-cli

    安装完后输入命令“vue -V”,如果出现vue的客户端版本信息,则说明安装成功。 
    3,安装 webpack,安装的命令为:

    cnpm install webpack -g

    安装完成之后,可以使用命令“ webpack -h”进行验证。至此,环境准备工作完成,后续即将开始环境验证工作。如果提示如下信息:

    The CLI moved into a separate package: webpack-cli
    Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)NO
    It needs to be installed alongside webpack to use the CLI

    可以使用下面的命令:

    npm install --save-dev webpack-cli -g

    4、打包工具webpack简介
    webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的依赖关系,所以具有更强大的JS模块化的功能,它能对静态资源进行统一的管理以及打包发布。 它在很多地方都能替代Grunt和Gulp,因为它能够编译打包CSS,做CSS预处理,对JS的方言进行编译,打包图片,代码压缩等等。

    Grunt和Gulp的工作方式:在一个配置文件中,指明对某些文件进行编译,组合,压缩等任务的具体步骤,运行之后自动逐步完成设定的任务。 
    相比Grunt和Gulp,webpack具有如下的一些优势:

    1. 对 CommonJS 、AMD 、ES6的语法做了兼容;
    2. 对js、css、图片等资源文件都支持打包;
    3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持;
    4. 有独立的配置文件webpack.config.js;
    5. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间;
    6. 支持 SourceUrls 和 SourceMaps,易于调试;
    7. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活;
    8. webpack 使用异步 IO 并具有多级缓存,使得 webpack 很快且在增量编译上更加快。


    下面介绍使用webpack+vue新建一个移动项目: 


    vue基本知识


    1、vue init

    使用命令vue init是初始化一个项目,例如:

    vue init webpack cartoon_vue

    基于webpack来构建一个名称为cartoon_vue的vue项目。

    2、vue-cli

    vue-cli是一个交互式命令行,通过vue命令构建项目会需要我们填写一些项目的信息,常见的信息有:

    1. Project Name:要创建的项目名称;
    2. Project Description:项目简介,也会出现在package.json文件中,可选;
    3. Author:作者,可选;
    4. Install vue-router:是否安装vue路由组件,做项目的话一定要安装;
    5. Use ESLint to lint your code:是否需要使用ESLint模块进行代码检测;
    6. Setup unit tests with Karma + Mocha?:是否安装测试(单元测试);
    7. Setup e2e tests with Nightwatch?:是否安装端到端的测试。

    创建项目过程:


    3、package.json

    package.json主要是项目依赖的一些第三方的库:

    1. dependencies:项目中实际需要使用到的依赖包; 
    2. devDependencies:项目开发过程中需要使用的一些工具包,不是项目实际线上代码的一部分。

    项目结构

    1. build目录:构建项目命令所需要使用到的一些脚本文件和配置文件;
    2. config目录:在vue-cli中会自动安装一个小型的express搭建的热重载web服务器,config里面就是关于这个服务器的相关配置;
    3. dist目录:项目编译构建上线后的存放目录;
    4. node_modules目录:项目依赖包存放目录;
    5. src目录:项目源代码存放目录;
    6. static目录:静态资源存放目录。
    7. 在项目开发过程中,我们的大部分任务是在src这个目录下完成的

    运行项目:(在项目目录下运行一下命令)

    npm run dev

    项目目录结构图:

     

    main.js:vue脚手架为我们自动生成的项目中设置的入口文件,在该入口文件中,做了一些项目初始化的工作:

    1. 引入 Vue;
    2. 引入必要的组件;
    3. 创建Vue实例。
    4. 路由

    通过ajax异步无刷新获取数据 

    vue为我们提供了一个第三方的框架来实现上述的功能:vue-router


    使用vue-cli搭建移动app时,需要进行如下的一些设置:

    使用vue-cli搭建项目框架;

    • 在index.html文件中添加<meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport">,在移动端设置禁止缩放,以便显示合适大小的页面;
    • 如果要将页面封装为app,那么需要将config/index.js中build的assetsPublicPath设置为’./’,build获得的页面可以直接打开,而不需要使用服务器。

     

    展开全文
  • webpack使用总结

    千次阅读 2017-02-15 10:39:15
    学习webpack的时候,看过它的官网,发现非常难懂,各种内容编排的很乱,并且挺生涩难懂的,和React Native等项目的官网比起来,差太多了,所以如果刚开始接触webpack的话,建议直接去其官网看。 一、webpack...

    前言:

    http://www.jianshu.com/u/82ac9006c5aa

    学习webpack的时候,看过它的官网,发现非常难懂,各种内容编排的很乱,并且挺生涩难懂的,和React Native等项目的官网比起来,差太多了,所以如果刚开始接触webpack的话,不建议直接去其官网看。

    一、webpack介绍

    1.1、什么是webpack

    webpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。

    webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能, 它能对静态资源进行统一的管理以及打包发布 ,在官网中用这张图片介绍:

    webpack官网的介绍.png

    它在很多地方都能替代Grunt和Gulp,因为它能够编译打包CSS,做CSS预处理,对JS的方言进行编译,打包图片,代码压缩等等。所以在我接触了gulp之后,就不太想用gulp了。

    1.2、为什么使用webpack

    在自己的学习使用中、和技术交流群里以及和朋友的讨论、网上其他大神的博客中得到一些为什么要使用webpack的原因,webpack的优点,webpack更适用于哪里。

    • 对 CommonJS 、AMD 、ES6的语法做了兼容;

    • 对js、css、图片等资源文件都支持打包;

    • 串联式 模块加载器 以及 插件机制 ,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持;

    • 有独立的配置文件webpack.config.js;

    • 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间;

    • 支持 SourceUrls 和 SourceMaps,易于调试;

    • 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活;

    • webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快;

    webpack最常用与spa应用,主要是vue和React,其实它就非常像Browserify,但是将应用打包为多个文件。如果单页面应用有多个页面,那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码。

    webpack也能用于服务端,但是 构建后端代码一般都不会用webpack ,坑太多了,所以正常情况下只用于前端,这是一个做了很多年前端的朋友告诉我的经验,所以别人已经走过的坑,还是不要去踩了~~~~ 并且我个人觉得后端其实也没必要这么做,因为后端更多的是处理逻辑,以及为前端提供数据.....

    二、基本使用

    2.1、webpack基本运行

    2.1.1、创建基本项目结构

    基本项目结构.png

    基本项目结构.png

    2.1.2、安装全局依赖:

    npm  install  webpack  -g

    2.1.3、创建配置文件

    在项目的根目录创建三个或多个webpack配置文件,我们创建两个:

    • webpack.dev.config.js → 开发环境中用到的配置文件
    • webpack.pub.config.js → 生产环境中用到的配置文件 

      添加webpack配置文件.png

    2.1.4、修改配置文件

    注意:开发环境和生产环境的配置是不一样的,具体配置上的差异看后面的内容。

    首先先配置开发环境,写上最基本的内容:

    var path = require('path');
    module.exports = {
        entry:path.resolve(__dirname,'src/js/app.js'),
            output: {
                path: path.resolve(__dirname, 'dist'),
                filename: 'bundle.js',
        },
    }

    最基本的配置文件中一般含有文件入口和输出文件的配置信息,后期还可以加上loader和各种插件配置使用。

    2.1.5、通过配置文件运行webpack

    • 在根目录运行 webpack 命令, 默认会去查找名称为webpack.config.js的文件执行 ,如果没有就会报配置信息没有配置的错误。

      webpack

      由于我们是将开发环境和发布环境分开的,并没有直接添加webpack.config.js,所以这种方式在我们这里显然是不行的;

    • 通过运行下面的命令进行配置文件的选择

      webpack --config webpack.dev.config.js

      命令行输出如下:

      zhongfabindeMacBook-Pro:webpack_test zhongfabin$ webpack --config webpack.dev.config.js
      Hash: d8151fcc7a02add3ec93
      Version: webpack 2.2.1
      Time: 49ms
        Asset     Size  Chunks             Chunk Names
      bundle.js  2.57 kB       0  [emitted]  main
       [0] ./src/js/app.js 63 bytes {0} [built]

      在dist中生成了bundle.js:

      生成在dist中的bundle.js.png

      这时候如果想看生成的js是否能用,我们需要将src中的拷贝一份到dist中,并且引入bundle.js(后面可以自动生成index,现在后没学到):

      手动加入index.html.png

      运行效果如下:

      运行效果.png

    注意:在实际的开发中,我们基本上不会用以上这种直接提供的命令,因为用这种方式,我们需要手动的敲打很多字母,在实际的开发中通用的方法都是使用配置文件的方式运行(接下来讲解)。

    2.2、把运行命令配置到npm的script中

    2.2.1、为什么加入到npm的script中

    • npm 是一个非常好用的用来编译的指令,通过 npm 你可以不用去担心项目中使用了什么技术,你只要调用这个指令就可以了,只要你在 package.json 中设置 scripts 的值就可以了。

    • 真正开发的时候你的webpack的命令会敲很长,因为有很多命令需要设置,即便你用了配置文件的方式,但一些--colors --hot这些命令是没法在配置文件中配置的。比如:

      webpack-dev-server --devtool eval --progress --colors --hot --content-base build

      所以我们不可能每次都敲这么长,因而我们就把这一大串配置到npm中

    2.2.2、使用步骤

    • 安装webpack, 注意:这时候不是全局安装

      npm install --save-dev webpack
    • 配置npm的package.json文件

      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev":"webpack --config webpack.dev.config.js",
        "pub":"webpack --config webpack.pub.config.js"
      },
    • 在根目录下执行命令

      npm run dev

    这样之后就不要敲那么复杂的命令了。

    2.3、为发布目录启动服务

    我们没修改一次就要需要输入 npm run develop 是一件非常无聊的事情,幸运的是,我们可以把让他自己运行,那就是使用webpack-dev-server。

    除了提供模块打包功能,Webpack还提供了一个基于Node.js Express框架的开发服务器,它是一个静态资源Web服务器,对于简单静态页面或者仅依赖于独立服务的前端页面,都可以直接使用这个开发服务器进行开发。在开发过程中,开发服务器会监听每一个文件的变化,进行实时打包,并且可以推送通知前端页面代码发生了变化,从而可以实现页面的自动刷新。

    使用步骤:

    • 安装webpack-dev-server

      npm install --save-dev webpack-dev-server
    • 调整npm的package.json中scripts 部分开发命令的配置

      {
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "pub": "webpack --config webpack.pub.config.js",
            "dev": "webpack-dev-server  --config webpack.dev.config.js --devtool eval --progress --colors --hot --content-base src"
        }
      }

      在dev的配置中做了以上改变之后,webpack-dev-server 会在 localhost:8080 建立一个 Web 服务器。

      几个参数的解释:

      • --devtool eval:为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
      • --progress:显示合并代码进度
      • --colors -- hot:命令行中显示颜色
      • --content-base 指向设置的输出目录
    • 手动访问 http://localhost:8080

      简单来说,当你运行 npm run develop 的时候,webpack会帮你会启动一个 Web 服务器,然后监听文件修改,然后自动重新合并你的代码。真的非常简洁。

    • 注意点

      • 用webpack-dev-server生成bundle.js文件是在内存中的,并没有实际生成;
      • 如果引用的文件夹中已经有bundle.js就不会自动刷新了,你需要先把bundle.js文件手动删除(后期有插件可以完成);
      • 用webstorm的同学注意了,因为webstorm是自动保存的,所以可能识别的比较慢,你需要手动的ctrl+s一下;
    • 几个报错

      • webpack版本的问题

        如果webpack使用的1.x的版本,那么webpack-dev-server也要使用1.x的版本,否则会报如下错误:Connot find module 'webpack/bin/config-yargs'。

        webpack版本引起的报错.png

      • 端口占用问题

        如果已经有一个工程中使用了webpack-dev-server,并且在运行中,没有关掉的话,那么8080端口就被占用了,此时如果在另一个工程中使用webpack-dev-server就会报错:Error: listen EADDRINUSE 127.0.0.1:8080。

        端口占用错误.png

    2.4、浏览器自动刷新

    做完以上的所有步骤之后,可以启动一个服务并监听变化了,但是浏览器你还需要手动刷新一下,我们其实是可以通过下面的这个方法让它自动刷新的。

    修改配置文件中的entry部分,当前entry的的值为:

    entry:path.resolve(__dirname,'src/js/app.js')

    将entry的值改为一个数组,除了上面的内容加进去之外,再加其他两句:

    var path = require('path');
    module.exports = {
        entry: [
            'webpack/hot/dev-server',
            'webpack-dev-server/client?http://localhost:8080',
            path.resolve(__dirname,'src/js/app.js')
        ],
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        }
    }

    特别注意:此时用webpack-dev-server生成bundle.js文件是在内存中的,所以在src中的index引入的js文件应该生成的bundle.js,如果还是引入的app.js的话,将会看不到刷新的效果。

    修改js文件.png

    三、常用的加载器

    加载器就是webpack准备的一些预处理工具,比如编译jsx和es6的加载器,处理sass等....

    使用加载器的步骤也很简单,首先是安装依赖,然后在配置文件的module中加一个字段module字段,在module写上loaders,在loaders中写上相应的配置。

    3.1、编译jsx和ES6到原生js

    • 安装以下的依赖
      npm install --save-dev babel-loader babel-core babel-preset-es2015  babel-preset-react
    • 修改开发配置文件

      module: {
        loaders: [
            {
                test: /\.jsx?$/, // 用正则来匹配文件路径,这段意思是匹配 js 或者 jsx
                loader: 'babel',// 加载模块 "babel""babel-loader" 的缩写
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
      }
    • 使用

      直接从新运行npm run dev即可

    3.2、加载CSS

    Webpack允许像加载任何代码一样加载 CSS。你可以选择你所需要的方式,但是你可以为每个组件把所有你的 CSS 加载到入口主文件中来做任何事情。

    加载 CSS 需要 css-loader 和 style-loader,他们做两件不同的事情,css-loader会遍历 CSS 文件,然后找到 url() 表达式然后处理他们,style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

    • 首先下载依赖

      npm install --save-dev css-loader   style-loader
    • 修改配置文件,在loaders中加上

      {
        test: /\.css$/,
        loader: 'style!css' // 如果有多个加载器,中间用感叹号隔开,多个加载器从右往左执行
      }

      “!”用来定义loader的串联关系,"-loader"是可以省略不写的,多个loader之间用“!”连接起来

    • CSS的加载策略

      • 在你的主入口文件中,比如 src/app.js 你可以为整个项目加载所有的 CSS
        import  './project-styles.css';
      • 懒加载(推荐使用) 
        如果你想发挥应用中多重入口文件的优势,你可以在每个入口点包含各自的 CSS。 
        你把你的模块用文件夹分离,每个文件夹有各自的 CSS 和 JavaScript 文件。再次,当应用发布的时候,导入的 CSS 已经加载到每个入口文件中。 

        引入CSS.png

    • 使用内联样式取代 CSS 文件

      在 “React Native” 中你不再需要使用任何 CSS 文件,你只需要使用 style 属性,可以把你的 CSS 定义成一个对象,那样就可以根据你的项目重新来考虑你的 CSS 策略。

      内联样式.png

    3.3、加载sass

    • 下载依赖

      npm  install  --save-dev  sass-loader
    • 修改配置文件

      {
        test: /\.scss$/,
        loader: 'style!css!sass'
      }
    • 使用和导入和CSS的使用方式一致

    3.4、图片处理

    直到 HTTP/2 你才能在应用加载的时候避免设置太多 HTTP 请求。根据浏览器不同你必须设置你的并行请求数,如果你在你的 CSS 中加载了太多图片的话,可以自动把这些图片转成 BASE64 字符串然后内联到 CSS 里来降低必要的请求数,这个方法取决与你的图片大小。你需要为你的应用平衡下载的大小和下载的数量,不过 Webpack 可以让这个平衡十分轻松适应。

    • 下载依赖

      npm  install  --save-dev url-loader file-loader
    • 修改配置文件

      {
        test: /\.(png|jpeg|gif|jpg)$/,
        loader: 'url?limit=25000'
      }

      加载器会把需要转换的路径变成 BASE64 字符串,在其他的 Webpack 书中提到的这方面会把你 CSS 中的 “url()” 像其他 require 或者 import 来处理。意味着如果我们可以通过它来处理我们的图片文件。

      url-loader 传入的 limit 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串。

    • 大图片处理

      在代码中的情况是以下之一:

      div.img{
        background: url(../image/xxx.jpg)
      }
      //或者
      var img = document.createElement("img");
      img.src = require("../image/xxx.jpg");
      document.body.appendChild(img);

      你可以这样配置:

      {
        test: /\.(png|jpeg|gif|jpg)$/,
        loader: 'file-loader?name=images/[name].[ext]'
      }

      针对上面的两种使用方式,loader可以自动识别并处理。根据loader中的设置,webpack会将小于指点大小的文件转化成 base64 格式的 dataUrl,其他图片会做适当的压缩并存放在指定目录中。

    四、发布配置

    前面一直都在捣鼓config webpack.dev.config.js,也就是一致都在配置开发环境,现在重要配置发布环境了,也就是配置config webpack.pub.config.js,其实发布的配置和开发的配置差不了太多。

    4.1、基础配置

    • 修改npm的package.json文件

      其实相关的配置早就加上去了,就是以下的这句:

      "pub": " webpack --config webpack.pub.config.js  -p",

      指向生产的配置文件,并且加上了webpack的cli的-p,他会自动做一些优化

    • 修改webpack.pub.config.js文件

      其实将webpack.dev.config.js中的内容拷贝过来即可,然后修改entry中的一些东西。

      var path = require('path');
      module.exports = {
        entry: path.resolve(__dirname, 'src/js/app.js'),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            loaders: [
                {
                    test: /\.jsx?$/, 
                    loader: 'babel',
                    query: {
                        presets: ['es2015', 'react']
                    }
                },
                {
                    test: /\.css$/, 
                    loader: 'style!css' 
                },
                {
                    test: /\.scss$/,
                    loader: 'style!css!sass'
                },
                {
                    test: /\.(png|jpeg|gif|jpg)$/,
                    loader: 'file-loader?name=images/[name].[ext]'
                },
            ]
        },
      }

      可以看到,其实生产环境的配置和开发的配置没有太大的不同,主要是把不需要的东西给去掉了。

    • 直接运行:npm run pub

    4.2、分离应用和第三方

    4.2.1、何时应该分离

    当你的应用依赖其他库尤其是像 React JS 这种大型库的时候,你需要考虑把这些依赖分离出去,这样就能够让用户在你更新应用之后不需要再次下载第三方文件。当满足下面几个情况的时候你就需要这么做了:

    • 当你的第三方的体积达到整个应用的 20% 或者更高的时候

    • 更新应用的时候只会更新很小的一部分

    • 你没有那么关注初始加载时间,不过关注优化那些回访用户在你更新应用之后的体验

    • 通过手机访问的用户比较多

    4.2.2、修改配置文件

    • 在头部引入webpack

      var webpack=require("webpack");
    • 修改entry

      修改entry.png

    • 增加plugins

      增加plugins.png

    • 结果:在dist文件夹中生成两个js文件,一个bundle.js,另一个是vendors.js

    五、常用插件介绍

    webpack提供了丰富的组件用来满足不同的需求,当然了我们也可以自行实现一个组件来满足自己的需求。

    plugins: [
         //your plugins list
     ]

    5.1、压缩插件

    这个插件是webpack自带的

    // 用webpack压缩代码,可以忽略代码中的警告
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),

    5.2、提取CSS插件

    在webpack中编写js文件时,可以通过require的方式引入其他的静态资源,可通过loader对文件自动解析并打包文件。通常会将js 文件打包合并,css文件会在页面的header中嵌入style的方式载入页面。但开发过程中我们并不想将样式打在脚本中,最好可以独立生成css文件,以外链的形式加载。这时extract-text-webpack-plugin插件可以帮我们达到想要的效果。需要使用npm的方式加载插件,然后 参见下面的配置,就可以将js中的css文件提取,并以指定的文件名来进行加载。

    • 安装依赖

      npm install --save-dev extract-text-webpack-plugin
    • 使用

      // 可以新建多个抽离样式的文件,这样就可以有多个css文件了。
      new ExtractTextPlugin("app.css"),
      plugins: [
        // 可以新建多个抽离样式的文件,这样就可以有多个css文件了。
        new ExtractTextPlugin("app.css"),
      ]

      修改loaders中的配置:

      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader' , 'css-loader')
      },

    注意:我发现这个有一个问题,就是他只能把css抽出来,但是sass的样式不能分离出来。

    5.3、新建index.html页面插件

    • 安装依赖

      npm install --save-dev html-webpack-plugin
    • 使用

      // 自动生成index.html页面插件
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      plugins: [
        new HtmlWebpackPlugin({
            template: './src/template.html',
            htmlWebpackPlugin: {
                "files": {
                    "css": ["app.css"],
                    "js": ["vendors.js","bundle.js"]
                }
            },
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        }),
      ]

      创建模板文件:template.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keyword" content="webpack,gulp,git">
        <title>model</title>
      </head>
      <body>
      <div id="app"></div>
      </body>
      </html>

    5.4、自动打开浏览器插件

    在开发环境中使用,run之后自动打开浏览器

    • 安装依赖

      npm install --save-dev open-browser-webpack-plugin
    • 使用

      // 自动打开浏览器插件
      var OpenBrowserPlugin = require('open-browser-webpack-plugin');
      plugins: [
        new OpenBrowserPlugin({url: 'http://localhost:8080/'})
      ]

    5.5、删除插件

    在开发环境中使用,run之后自动打开浏览器

    • 安装依赖

      npm install --save-dev clean-webpack-plugin
    • 使用

      // 删除文件夹
      var CleanPlugin = require('clean-webpack-plugin');
      plugins: [
        // 构建之前先删除dist目录下面的文件夹
        new CleanPlugin(['dist']),
      ]

    5.6、去掉react中的警告

    plugins: [
        new webpack.DefinePlugin({
            //去掉react中的警告,react会自己判断
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
    ]
    展开全文
  • Webpack是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将...
  • 这两周一直想写webpack的知识点,却发现webpack其实要说的很具体内容挺多的。而且稀土掘金上一搜webpack有好多人都有去写webpack的知识点,所以本文中不再去重复别人的东西了,就简单记录一下我对webpack的理解。并...
  • 掘金站内 webpack 优秀文章汇总

    千次阅读 2019-12-22 12:56:44
    本文使用 juejin-spider 生成 ... CSS][chenhongdong] webpack4-用之初体验,一起敲它十一遍 (3)[???? 1726][???? 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了 (4)[???? 1705][????...
  • webpack-dev-server实现项目热部署

    千次阅读 2018-11-10 17:23:46
      我们在修改了项目代码以后需要不断的重新执行webpack命令,重新打包然后回到浏览器去刷新页面,这种开发效率很低下,所以说为了省去这部分没必要的操作,因而我们在这里要使用webpack-dev-server来实现当代码...
  • WebPack安装-使用-Loader-配置-插件-环境-排错详解(下扩展) WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)http://blog.csdn.net/pcaxb/article/details/53390151详细介绍WebPack的安装-使用-Loader,Web
  • webpack4+vue 的基本打包配置详解

    千次阅读 多人点赞 2018-11-09 11:22:35
    前提:确保已安装node,为了安装速度快一些,使用cnpm源,安装cnpm:npm i cnpm -g  注意:Mac环境下,操作全局环境,需要开启...1、安装webpack4 建立如下的目录结构,注意文件夹和文件名都和图中相同: 接...
  • webpack+vue2.0+nodeJs搭建环境

    万次阅读 2018-02-02 13:48:31
    webpack+vue2.0+nodeJs搭建环境 npm 和 nodejs还有淘宝镜像 npm 的全称是 nodejs包管理,现在越来越多的项目(包)都可以通过npm来安装管理,nodejs是js运行在服务器端的平台,它使得js的能力进一步提高,...
  • 详解前端模块化工具-Webpack

    千次阅读 2015-11-09 14:58:47
    React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势,可以成为最主流的React开发工具呢?webpack是什么CommonJS和AMD是用于JavaScript模块管理的...
  • vue-cli的webpack模板项目配置文件分析

    万次阅读 多人点赞 2017-09-11 11:51:10
    由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修改配置的时候不会“太折腾...
  • 入门Webpack,看这篇就够了

    千次阅读 2016-09-30 13:23:11
    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果...如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了
  • webpack简介

    千次阅读 2018-02-08 10:12:04
    1.1 什么是webpackwebpack是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。 webpack支持AMD...
  • webpack安装使用教程

    千次阅读 2017-12-25 10:44:15
    写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果...如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Web
  • vue-cli详解

    千次阅读 2018-05-11 16:04:58
    1.何为vue-cli 简单来说就是Vue搭建的架子 API:https://github.com/vuejs/vue-cli 2.安装 全局安装vue-cli npm isntall -g vue-cli 3.初始化创建项目 vue init &...template-name为模板的...
  • 基于webpack和vue.js搭建的H5端框架

    千次阅读 2016-10-15 22:28:53
    在公司作为一个最最最最最最最底层的搬砖码农,经历了两个版本的铸(zhe)炼(mo)之后,我痛下决心今后一定要:…………..一定要和产品惺(shi)惺(bu)相(liang)惜(li)。 开始之前 本文包含以下技术,文中尽量给与...
  • webpack详细配置解析

    千次阅读 2017-04-12 18:00:12
    阅读本文之前,先看下面这个webpack的配置文件,如果每一项...如果你以前没怎么接触过Webpack,而你又你对webpack感兴趣,那么动手跟着本文中那个贯穿始终的例子写一次,写完以后你会发现你已明明白白的走进了Webpack
  • webpack】插件 plugins

    千次阅读 2019-08-21 11:09:54
    插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。 webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期...
1 2 3 4 5 ... 20
收藏数 3,592
精华内容 1,436
关键字:

webpack 发布之后不显示图片