WEBPACK - 技术教程文章
黄聪：不使用 webpack，vuejs 异步加载模板【代码】
webpack 打包不会玩，整了这么个小玩具 一段 vue 绑定代码，关键点在 gmallComponent1、异步加载外部 vue 文件（非 .vue）2、按一定规则拆分 template、script、stylenew Vue({el: ‘#app_vuejs_replace‘,data: {search_key : ‘‘,results : [],pageindex : 1,selecteditem : null},components: {‘vue-test‘: gmallComponent(‘gz/test.html‘, {props: [‘items‘]})} }); gz/test.html 使用习惯几乎遵循 vue 原生，定义模板、...
webpack 搭建 vue项目环境【代码】【图】
目录结构：index.html:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><div id="app"></div><script src="/dist/main.js"></script></body></html>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘ import MM from ‘../packages/...
3.2.3 webpack图片等资源的处理 file-loader|url-loader|img-loader【代码】【图】
如果引入除了 js 之外的内容，必须使用 loader 去处理，否则会报错 “Unexpected character ‘口’” --- 不认识1、需要用到的 loaderfile-loader//能够正确引入图片，直接引入图片会报错 url-loader//包含file-loader，在此基础上增加了图片转base64等功能 img-loader//处理图片专用，图片的压缩等功能 2、file-loader - -> 命名 和 路径{ // 图片test: /\.(png|jpg|jpeg|gif)$/,use: [{loader: ‘file-loader‘}] } 处理完成...
webpack 底层原理【图】
1. 如何编写一个loader实现的功能是：把js代码中的lee改成dellLee this.query 获取options的name； 原文：https://www.cnblogs.com/xiaozhumaopao/p/11625489.html
webpack 入门一【代码】【图】
最近报了个webpack班,此博客为上课笔记从0搭建自己的webpack开发环境1.什么是Webpack？webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle使用Webpack作为前端构建工具：代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压...
react+webpack+redux+router+ant 构架react开发环境（1）【代码】【图】
需要安装的软件 node.js npm推荐使用使用node@6.3.0以上的版本，因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm，因为伟大的墙，所以介意大家更换镜像，安装完毕之后，打开终端（mac）window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号，就说明安装成功了，可以下面的步骤了。构建项目新建一个文件夹使用webstorm编辑该文件夹，之后打开控制台，输入 npm init 来生成一个 package.json 的文件夹（...
webpack使用六【代码】【图】
插件（Plugins）插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。使用插件的方法要使用...
npm run build 时 报 __webpack_public_path__ = window.webpackPublicPath; 中的windows未定义【图】
原本 webpack.js在webpack.config.babel.js同目录下，在app.jsx中引用，用mac打包没问题，但是window就报window未定义，改到src和app.jsx同目录后，就没有问题了 原文：https://www.cnblogs.com/jcz1206/p/12253453.html
webpack的使用【代码】【图】
1、全局安装webpack$ cnpm install -g webpack2、新建一个文件夹，作为项目的文件夹3、在这个文件夹下，初始化webpack$ npm init最后再Ctrl+C跳出4、在文件夹里安装webpack$ cnpm install webpack --save-dev 5、新建一个hello.js文件function hello (str) {alert(str); }6、将hello.js文件打包hello.bundle.js$ webpack hello.js hello.bundle.js 原文：http://www.cnblogs.com/hongmaju/p/6930962.html
The way of Webpack learning (VI.) -- 长缓存优化【代码】【图】
使用commonChunkPlugin的都是基于webpack3.10.0，在webpack4中直接配置optimization就可以了。一：什么是长缓存？浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。二：场景实现1、业务代码+第三方库代码解决方法：提取vendor，hash -> ...
webpack打包错误的解决办法：webpack : 无法加载文件 C:\Users\lili\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。【图】
使用Hbuilder建立了一个web项目。然后在使用webpack打包时，终端出现了如下的错误信息： 查其原因是因为powershell对于脚本的执行有着严格的安全限制。可以使用Set-ExecutionPolicy来修改PowerShell中执行策略的用户首选项(preference). 执行策略是Windows PowerShell安全策略中的一部分. 它将决定你是否可以载入配置文件(包括你的Windows PowerShell profile文件)和运行脚本, 它将会在运行前确定哪些文件必须具有数字签名(digital...
关于webpack的小demo的创建【图】
简单粗暴上命令行：npm init //生成一个package.jsonnpm install webpack --save-dev //将webpack增加到package.json文件中npm install webpack-dev-server --save-dev //安装开发工具上面那个图，其实是很不规范的，主要是为了让自己搞清楚路径名到底怎么写的问题； 原文：http://www.cnblogs.com/Secretmm/p/5670043.html
用node.js和webpack做前后端分离的总结
1.webpack打包的特点 （打包文件到指定地点，修改原文件里的引用路径为打包的地点） 涉及output的path/public path/dev-server里的public path等概念 webpack的入口是js文件，可以包办从js里引入的css和其他html模块，但无法包办根html文件(index.html)，即引入webpack入口js文件的html文件。2.开发环境（dev）和生产/线上环境(prod)的区分 （是否压缩，不同的打包路径，不同的config等等）3.express如何调用静态文件 express.sta...
webpack学习笔记
1>webpack-初识webpack及环境搭建npm install -g webpack 全局安装npm install -g webpack-dev-server 准备一个服务器并监听webpack <需要打包的文件> bundle.js（输出到哪去） 打包文件webpack <需要打包的文件> bundle.js（输出到哪去） --watch 持续监听、打包文件webpack 对应 model.exports 和 require()搭配使用 自定义的文件引入时需要./文件位置系统自带的不需要./2>webpack-运用第三方库 使用第三方插件以使用...
Vue--webpack实时重新加载【代码】
前戏每一次手动打包很麻烦，打包后还需要手动刷新浏览器。采用 webpack 提供的工具： webpack-dev-server ，它允许在运行时更新所有类型的模块后，而无需手动打包和刷新页面，会自动打包和刷新页面。可以很大程度提高开发效率。参考：https://webpack.docschina.org/guides/development/#使用-webpack-dev-server安装在当前项目下安装npm install --save-dev webpack-dev-server 修改 webpack.config.js 配置// 引入node中的path...
webpack-dev-server
webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务，主要提供两个功能：1 为静态文件提供服务2 自动刷新和热更新（HMR）安装 npm install webpack-dev-server --save-dev虽然可以全局安装和运行webpack-dev-server，但是建议在本地安装，webpack-dev-server将始终在全局安装中使用本地安装建议使用两种主要的模块使用方法：使用cli使用它的最简单的方法是使用CLI,在...
07webpack--下载对应的css模块【代码】
<!--本节 loader配置处理css样式在src下新建css文件夹 在css下创建index.css 在main.js这个入口文件中 引入js模块 和 css杨思表是不同的在main.js文件中 import ‘./css/index.css‘注意：webpack默认只能打包处理JS类型的文件 无法处理其他的非JS类型的文件如果处理其他非js类型的文件 需要安装第三方的loader加载器cnpm i style-loader css-loader -D 需要安装两个加载器 这个凉饿模块处理css打开webpack.config.js这...
webpack中字体配置，可以引入bootstrap【代码】
{test:/\.(eot|ttf|woff|woff2|svg)$/,loader:‘file?name=fonts/[name].[ext]‘} 将css中用到的字体全部提取存放到fonts目录下，fonts目录是相对output.path目录而言的原文：http://www.cnblogs.com/toward-the-sun/p/6213111.html
前端随心记---------webpack管理工具
webpack：官网：https://www.webpackjs.com/ 由来： 1.开发的时候，我们写的代码是有注释，有空格（文件比较大）在开发环境中注释有意义的，但是在生产环境中，注释是没有意义的。代码应该是尽可能压缩的足够小（网络请求）如果我们没有借助一些其他工具的时候，我们需要手工的把 xxx.js 转换 xxx.mini.js 文件。（文件美化） 2.我们的js在发展的过程中，出现很多的新特性，例如 es6 箭头函数、class 语法糖，Promise等。...
webpack入门
Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码隔离。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJS模块、AMD模块、ES6模块、CSS模块、图片、JSON、Coffeescript、LESS等。简单的来说，Webpack就是一个模块打包器，它对模块的依赖关系进行静态分析，然后把这些模块按照相应的规则放在不同的文件夹里...
Webpack vs Rollup【代码】
一、Webpack诞生于2012年，目前Javascript社区使用得比较多的构建工具。它的出现，解决了当时的构建工具不能处理的问题——构建复杂的单页面应用(SPA)。它是一个强力的模块打包器。 所谓包(bundle)就是一个 JavaScript 文件，它把一堆资源(assets)合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript、CSS 样式、HTML 以及很多其它类型的文件。 Webpack的特点代码分割Webpack 有两种组织模块依赖的...
Webpack 定义process.env的时机【代码】
定义 process.env的时机如果已经提取了公共配置文件 webpack.common.js分别定义了开发配置webpack.dev.js和生产配置webpack.prod.js在webpack.common.js 合并 选项时的 plugins中使用插件DefinePluginconst common = require(‘./webpack.common‘) const merge = require(‘webpack-merge‘) const webpack = require(‘webpack‘) const config = require(‘../env/dev‘)module.exports = merge(common, {mode: ‘development‘...
node+webpack环境搭建 vue.js 2.0 基础学习笔记【代码】【图】
npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli //可用淘宝镜像 npm=》cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org生成项目vue init webpack my-first-vue-project //生成项目名为my-first-vue-project的模板了解vue与webpack的关系 学习vue装好项目后cd my-first-vue-project //进入目录npm install //下载所需要...
WebPack的配置（一、起步）【代码】
一、webpack是什么 简单来说它就是一个打包工具，将我们写的前端代码（包含js css less vue 之类的通通打包成一个js文件 图片除外，图片打包之后还是图片）二、webpack的依赖 webpack它的配置依赖于node.js 这里我们用node.js下的npm工具来进行webpack的安装配置三、webpack的安装与配置 3.1安装webpack 首先在根文件目录下打开命令行输入npm init 生成node下的package.json 用node下的npm工具执行命令 npm...
webpack学习笔记【代码】【图】
什么是webpack ？ webpack 是一个模块打包机，它主要是根据你项目的结构，找到项目里js模块和其他浏览器不能直接识别运行的其他拓展语言，将其转换并打包的为合适的格式供浏览器识别使用。与grunt/gulp的工作模式相比：webpack与它们的工作模式正好是相反的，grunt/gulp是在一个文件里指明对哪些文件进行编译，打包组合，然后其工具就会自动的完成。它相当于从一个小溪口出来的水按照指定的管道往下走。而webpack是把项目当成一个...
webpack build后生成的app、vendor、manifest三者有何职能不同？【图】
贴一下之前vue脚手架的webpack3配置：app.js是入口js，vendor则是通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分），而manifest则是在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容。从截图上看也看出，vendor的文件大小最大，因为其包含了vue整一个框架的代码，以及webpack的模块化代码。至于manifest的话，主要是一些异步加载的实现方法（通过建立script方式动态引入js），...
webpack+typescript【代码】
1.npm install --save typescript2.npm install --save ts-loaderwebpack.config.jsmodule.exports = { entry: ‘./app.ts‘,output: {filename: ‘bundle.js‘},resolve: {extensions: [‘‘, ‘.webpack.js‘, ‘.web.js‘, ‘.ts‘, ‘.js‘]},module: {loaders: [{ test: /\.ts$/, loader: ‘ts-loader‘ }]} } 原文：http://www.cnblogs.com/bldf/p/6387521.html
webpack----7生产环境构建 配置文件【代码】
npm install --save-dev webpack-merge开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独...
WEBPACK简介【代码】
Webpack 是一个强力的模块打包器。 所谓 包 (bundle) 就是一个 JavaScript 文件，它把一堆 资源 (assets) 合并在一起，以便它们可以在同一个文件请求中发回给客户端。 包中可以包含 JavaScript 、 CSS 样式、 HTML 以及很多其它类型的文件。1、安装//全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack 我们通过一个 JavaScript 配置文件 webpack.config.js 来决定 Webpack 做什么以及如何做。...
webpack 清理旧打包资源插件【代码】
当我们修改带hash的文件并进行打包时，每打包一次就会生成一个新的文件，而旧的文件并 没有删除。为了解决这种情况，我们可以使用clean-webpack-plugin 在打包之前将文件先清除，之后再打包出最新的文件安装npm install clean-webpack-plugin --save-dev配置const {CleanWebpackPlugin}=require('clean-webpack-plugin');module.exports={plugins=[new CleanWebpackPlugin()] }使用配置完成,在打包时自动生效原文：https://www.cnb...