webpack 2 系列

[js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)

上文我们对html-webpack-plugin的实例htmlWebpackPlugin进行了遍历分析,讲解了几个常用属性( inject, minify )以及自定义属性的添加,本文,我们继续深入他的配置选项的探讨. 一.chunks选项这个属性非常有用,可以指定某个页面加载哪些chunk( 如:js文件 ) 我们可以用他做多个页面模板的生成. 比如,我们在实际开发中,做一个博客网站,一般来说有首页,文章列表页,文章详情页等等,这些页面都有一个特点,都要引入一些公共的js文件以及该页面特有的…

[js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

上文我们讲到了options的配置和获取数据的方式,本文,我们继续深入options的配置一.html-webpack-plugin插件中的options除了自己定义了一些基本配置外,我们是可以任意的添加自定义的数据 webpack.dev.config.js文件: var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : { main : './src/js/main.js', cal…

[js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.html文件会动态引入我们打包后生成的js文件呢?,我们可以使用插件html-webpack-plugin,首先安装这个插件npm install html-webpack-plugin --save-dev,好的,接下来就开始用这个插件了官方参考文档: 插件通用用法:https://webpack.j…

[js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下)

本文继续接着上文,继续写下webpack.config.js的其他配置用法. 一.把两个文件打包成一个,entry怎么配置? 在上文中的webpack.dev.config.js中,用数组配置entry webpack.dev.config.js文件代码: console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2 module.exports = { entry : ['./src/js/main.js', './src/js/calc.j…

[js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法

什么是loader呢,官方解释为文件的预处理器,通俗点说webpack在处理静态资源的时候,需要加载各种loader,比如,html文件,要用html-loader, css文件要用css-loader,style-loader等等. 官方参考文档:https://webpack.js.org/loaders/ 我们从本文开始,重新搭建一个项目结构来解释下loader的用法. 一.项目结构搭建准备: 目录结构: demo3 dist src components modal.html modal…

[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法

我们还是接着上文继续,本文我们要讲的是图片资源的打包,图片在静态排版中,经常出现的两个位置是css通过background引入背景,还有一种就是在html模板文件中用img标签引入的方式,如果要在webpack使用图片资源,我们需要用file-loader来处理. 安装file-loader: npm install file-loader --save-dev 在src目录下面新建一个文件夹( img ) 存储图片一.demo3目录下面的index.html文件引入图片 <body> &l…

[js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease 1s; } 一.这是一个css3的过渡样式,我们知道,写css3的时候,需要加上浏览器前缀. 那么我们着这里就需要安装postcss-loader和autoprefixer插件安装postcss-loader: npm install postcss-loader --save-dev 安装au…

webpack 2 系列 webpack 是一个强大的工具,学会通过工具来解决开发效率问题,是每一个工程师都必备的技能之一. 那么我们来从零开始搭建一个基于webpack 2 到开发架子,来提升自己到开发速度.体验.代码编译.打包.压缩等等功能. 首先介绍一下国内到 webpack 社区网站,webpack国内社区第一步. 我们要做什么? 在开始搭建之前,我们得清晰到考虑到,我们搭建这个开发架子是用来做什么的,常见的,我们需要起一个开发环境的服务以便于我们访问到我们开发到页面,然后我…

[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上) [js高手之路]深入浅出webpack教程系列3-配置文件webpack.config.js详解(下) [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上) [js高手之路]深入浅出webpack教程系…

[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)

Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码.它会根据 lang 属性自动用适当的加载器去处理. CSS 例如,我们编译用 SASS 编译 <style> 标签: npm install sass-loader node-sass --save-dev <…

Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 &…

Webpack学习系列（二）

一: 安装: npm install webpack-dev-server -g npm install webpack-dev-server --save (下载到当前文件夹) npm install webpack --save (下载到当前文件夹) webpack.fig.js: var webpack = require('webpack');module.exports = { entry: __dirname + '/src/js/index.js', output: { path:…

Webpack学习系列（一）

一:全局安装: npm install webpack -g (-g全局安装) npm init -y (初始化参数) npm install webpack --save-dev (安装在当前文件夹下,--save是参数,-dev是选项) 二:前端骨架: --开发环境: --测试环境: --生产环境:(就是去赚钱了) 三: 我的文件夹: assets --lib --js --css --images src --lib --js --css --images index.html pa…

Vue + Webpack + Vue-loader 系列教程

http://www.cnblogs.com/terry01/p/5953464.html 介绍 Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue 组件转化成JavaScript模块. vue-loader 提供了一些非常酷炫的特性: ES2015默认可用: 在每个 Vue 组件内支持其他的 Webpack 加载器,如用于<style>的 SASS 和用于<template> 的 Jade. 把 <style> 和 <te…

webpack坑系列--安装webpack-cli

综下所述: 还是装3.11.0版本吧 cnpm i webpack@3.11.0 -D 最近在学习webpack过程中,根据官方文档推荐局部安装webpack,执行webpack -h命令出现以下提示 npm install webpack-cli -D提示在开发环境中局部安装webpack-cli成功安装webpack-cli后,运行webpack -h还是提示说明webpack命令还是没有成功执行不知道什么情况在package.json文件中,显示webpack和webpack-cli已经…

关于Webpack详述系列文章（第四篇）

1. webpack基本概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入.Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块.Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割.Loader:模块转换器,用于把模块原内容按照需求转换成新内容.Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监…

关于Webpack详述系列文章（第三篇）

1. 类图 1. 模块 Module是webpack中最核心的类,要加载定的一切和依赖都是Module. 它有很多子类 RawModule NormalModule MultiModule ContextModule DelegatedModule DllModule ExternalModule 2. 依赖 Module类继承自DependenciesBlock,它有一个dependencies数组,表示此模块依赖的其他模块. webpack使用Dependency的各种子类来表示不同的模块加…

关于Webpack详述系列文章（第二篇）

1.缩小文件搜索范围 1.1.1 include & exclude module:{ rules:[ { test:/\.js$/, use:['babel-loader?cacheDirectory'], include:path.resolve(__dirname,'src'), exclude:/node_modules/ } ] } 1.1.2 resolve.modules resolve: { modules: [path.resolve(__dirname, 'node_modu…

关于Webpack详述系列文章（第一篇）

WebPack官网地址(https://webpack-china.org/) 1. 什么是WebPack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用. 构建就是把源代码转换成发布到线上的可执行 JavaScrip.CSS.HTML 代码,包括如下内容. 代码转换:TypeScript 编译成 JavaScript.SCSS 编…

webpack入门系列2

前面介绍了使用webpack做最基础的打包,接下来讲讲webpack的进阶. 1.使用 webpack 构建本地服务器: 想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实Webpack提供一个可选的本地开发服务器,这个本地服务器基于node.js构建,可以实现你想要的这些功能,不过它是一个单独的组件,在webpack中进行配置之前需要单独安装它作为项目依赖 npm install --save-dev webpack-dev-server -g devServer作为web…

webpack入门系列1

一.什么是webpack?为什么要使用它? Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么我们要使用它呢?因为现今的很多网页,它们拥有复杂的JavaScript代码和一大堆依赖包,开发起来比较耗时耗力.为了简化开发复杂度, 前端社区涌现出很多好的实践方法:模块化.Sass/Less等CSS预处理器......这些改进确实大大提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识…

Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构. 本文摘要:主要讲解在不需要引入额外的loader的条件下运用Webpack 5 如何高效处理字体图标.图片资源的方法与步骤. 网页上需要使用到图片.字体图标等资源,有些网站还会使用到音频.视频等资源.在之前的webpack4版本,默认是不能处理图片资源的,需要额外配置loader(url-loader和file-loader)才能处理.在webpack 5中默认就可…

【webpack 2 系列】的更多相关文章