Webpack3.5.5
文章平均质量分 58
E_li_na
这个作者很懒,什么都没留下…
展开
-
webpack之管理输出
管理输出主要针对多个bundle,但是通常打包成的bundle只有一个。1.相关文件index.html 多加 <html> <head> <title>Output Management</title&原创 2018-05-16 19:50:33 · 778 阅读 · 0 评论 -
Invalid configuration object. Webpack has been initialised using a configuration object that does no
webpack配置报错描述: 一般遇到这个错误,说明你编写的代码语法与本地安装的webpack版本不兼容。原因是项目要用到px转换为rem,使用postcss-px2rem这个插件的时候,0.3.0版本的配置如下:var px2rem = require('postcss-px2rem');module.exports = { module: { loaders: [ ...原创 2019-02-26 18:05:46 · 6949 阅读 · 0 评论 -
webpack3插件CommonChunkPlugin分离第三方库和公共模块
个性定位:优化利器可以建立一个独立文件(又称作 chunk)的功能,用于提取第三方库和公共模块。 但是webpack 4已经到取消了这个插件,转而使用SplitChunksPlugin,相关文章webpack4: 代码分割CommonChunkPlugin的寿终正寝,详解CommonsChunkPlugin的配置和用法1、不分离出第三方库和公共模块1、1 准备文件src目录下...原创 2018-05-22 16:03:38 · 5807 阅读 · 0 评论 -
webpack之缓存
webpack的缓存通过文件名来。通过使用output.filename进行文件名替换,如果文件名被替换,浏览器会认为它被更新,则缓存失效,向服务器请求资源;否则继续使用缓存,无需再次请求资源。通过缓存降低网络流量,使网站加载速度加快。 只需在webpack.config.js里配置:const path = require('path'); const CleanWebpackPlug...原创 2018-05-21 18:22:53 · 1152 阅读 · 0 评论 -
webpack之公共路径
公共路径(Public Path)用在生产环境下,想将静态文件统一使用cdn加载的情况下。import webpack from 'webpack';// 如果预先定义过环境变量,就将其赋值给`ASSET_PATH`变量,否则赋值为根目录const ASSET_PATH = process.env.ASSET_PATH || '/';export default { outp...原创 2018-05-21 17:42:05 · 1318 阅读 · 0 评论 -
webpack之代码拆分
代码分离:就是将代码分离到不同的bundle中。原创 2018-05-21 16:51:55 · 800 阅读 · 0 评论 -
webpack之Tree shaking
Tree shaking:移除多余代码。或者说按需引用。//math.js// 这个函数没有被其他地方引用过export function square(x) { return x * x;}// 这个函数被引用了export function cube(x) { return x }//main.jsimport {cube} from './maths...原创 2018-05-21 16:34:17 · 310 阅读 · 0 评论 -
webpack生产环境构建
webpack对生产环境的构建有三种方式:自动方式,手动方式,高级途径。1、自动方式1.1 js文件压缩webpack自带压缩插件UglifyJsPlugin,仅需在plugins中配置。【它运行UglifyJS来压缩插件,支持所有的Uglify选项】 // webpack.config.jsconst webpack = require('webpack');mod...原创 2018-05-21 15:24:26 · 703 阅读 · 0 评论 -
webpack之管理资源
npm 5,你可能还会在目录中看到一个 package-lock.json 文件1. 加载css为了从js模块中import一个css文件,首先,你需要在module配置中安装并添加style-loader和css-loader:npm install --save-dev style-loader css-loader第二步:在webpack.config.js中添加module...原创 2018-05-14 16:15:58 · 329 阅读 · 0 评论 -
Webpack打包简教程
一、在本地安装webpack安装的前提是安装了Node.js,使用 Node.js 最新的长期支持版本(LTS - Long Term Support),是理想的起步。使用旧版本,你可能遇到各种问题,因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。 对于大多数项目,我们建议本地安装。npm i --save-dev webpacknpm i --save-...原创 2018-05-14 11:18:26 · 3082 阅读 · 0 评论 -
Webpack初步接触(一)
官网v3.5.51. 简介一个大现代js应用程序的模块打包工具(module bundler)。webpack可以纯粹在服务端运行。 当webpack处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要地每个模块,然后将所有地这些模块打包成少量的bundle,通常只有一个,由浏览器加载。它是高度可配置的。2.概念1)入口entrywebpack创建应...原创 2018-05-14 09:44:30 · 423 阅读 · 0 评论 -
webpack之模块热替换
HMR是webpack内置的,只能用在开发模式,不能用于生产模式。是webpack提供的最有用的功能之一。1.更新webpack-dev-server配置webpack.config.jsconst path = require('path');const HtmlWebpackPlugin = require('htmlwebpackplugin');const webpac...原创 2018-05-18 18:05:16 · 684 阅读 · 0 评论 -
webpack之开发模式
一、source-map:追踪错误和警告sourc-map:将编译后的代码映射回原始代码,使得追踪错误和警告更加容易。 比如错误来自a.js,b.js.c.js中的b.js,source-map就会告诉你是在这个文件中。 只需配置 const path = require('path'); const HtmlWebpackPlugin = require('html-webpac...原创 2018-05-18 11:43:23 · 655 阅读 · 0 评论 -
使用vue-loader不必require图片
以前在写vue的时候,经常要写这样的代码,把图片提前require给一个变量,然后再把变量传给组件(注意是组件,不是原生的东西,不是原生如img):<template> <div> <avatar :default-src="logoUrl"></avatar> </div></template><scr...原创 2019-06-26 15:17:53 · 1648 阅读 · 0 评论