webpack篇
2017年09月28日 14:08:18
https://juejin.im/post/59cb6307f265da064e1f65b9
还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webpack,就仔细看看,虽然本教程不能让你webpack玩的很6,但是懂操作流程够了。面试你一般问你webpack的原理,Loader的原理,你有用那些优化措施
前端开发已经模块化,它改进了代码库的封装和结构。打包工具已经成为了一个项目必不可少的部分,
如今这儿有几种可能的选择,例如webpack,grunt,gulp等。
webpack因为他的功能和扩展性在过去的几年中,受到非常大的欢迎。但是webpack的配置总是让人觉得很困惑,
今天我们将从一个空的配置文件逐步完成一个完整的设置进行打包文件。
概念
不像大多数的模块打包机,webpack是收把项目当作一个整体,通过一个给定的的主文件,webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包成一个或多个浏览器可识别的js文件
install
首先添加我们即将使用的包:
npm install webpack webpack-dev-server --save-dev
webpack是我们需要的模块打包机,webpack-dev-server用来创建本地服务器,监听你的代码修改,并自动刷新修改后的结果。这些是有关devServer的配置
contentBase, // 为文件提供本地服务器
port, // 监听端口,默认8080
inline, // 设置为true,源文件发生改变自动刷新页面
historyApiFallback // 依赖HTML5 history API,如果设置为true,所有的页面跳转指向index.html
devServer:{
contentBase: './src' // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}
然后我们在根目录下创建一个'webpack.config.js',在'package.json'添加两个命令用于本地开发和生产发布
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
}
在使用webpack命令的时候,他将接受webpack的配置文件,除非我们使用其他的操作
entry
entry: 用来写入口文件,它将是整个依赖关系的根
var baseConfig = {
entry: './src/index.js'
}
当我们需要多个入口文件的时候,可以把entry写成一个对象
var baseConfig = {
entry: {
main: './src/index.js'
}
}
我建议使用后面一种方法,因为他的规模会随你的项目增大而变得繁琐
output
output: 即使入口文件有多个,但是只有一个输出配置
var path = require('path')
var baseConfig = {
entry: {
main: './src/index.js'
},
output: {
filename: 'main.js',
path: path.resolve('./build')
}
}
module.exports = baseConfig
如果你定义的入口文件有多个,那么我们需要使用占位符来确保输出文件的唯一性
output: {
filename: '[name].js',
path: path.resolve('./build')
}
如今这么少的配置,就能够让你运行一个服务器并在本地使用命令npm start或者npm run build来打包我们的代码进行发布
Loader
loader的作用:
1、实现对不同格式的文件的处理,比如说将scss转换为css,或者typescript转化为js
2、转换这些文件,从而使其能够被添加到依赖图中
loader是webpack最重要的部分之一,通过使用不同的Loader,我们能够调用外部的脚本或者工具,实现对不同格式文件的处理,loader需要在webpack.config.js里边单独用module进行配置,配置如下:
test: 匹配所处理文件的扩展名的正则表达式(必须)
loader: loader的名称(必须)
include/exclude: 手动添加处理的文件,屏蔽不需要处理的文件(可选)
query: 为loaders提供额外的设置选项
ex:
var baseConfig = {
// ...
module: {
rules: [
{
test: /*匹配文件后缀名的正则*/,
use: [
loader: /*loader名字*/,
query: /*额外配置*/
]
}
]
}
}
要是loader工作,我们需要一个正则表达式来标识我们要修改的文件,然后有一个数组表示
我们表示我们即将使用的Loader,当然我们需要的loader需要通过npm 进行安装。例如我们需要解析less的文件,那么webpack.config.js的配置如下:
var baseConfig = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve('./build')
},
devServer: {
contentBase: './src',
historyApiFallBack: true,
inline: true
},
module: {
rules: [
{
test: /\.less$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'less-loader'}
],
exclude: /node_modules/
}
]
}
}
这里介绍几个常用的loader:
babel-loader: 让下一代的js文件转换成现代浏览器能够支持的JS文件。
babel有些复杂,所以大多数都会新建一个.babelrc进行配置
css-loader,style-loader:两个建议配合使用,用来解析css文件,能够解释@import,url()如果需要解析less就在后面加一个less-loader
file-loader: 生成的文件名就是文件内容的MD5哈希值并会保留所引用资源的原始扩展名
url-loader: 功能类似 file-loader,但是文件大小低于指定的限制时,可以返回一个DataURL事实上,在使用less,scss,stylus这些的时候,npm会提示你差什么插件,差什么,你就安上就行了
Plugins
plugins和loader很容易搞混,说都是外部引用有什么区别呢? 事实上他们是两个完全不同的东西。这么说loaders负责的是处理源文件的如css、jsx,一次处理一个文件。而plugins并不是直接操作单个文件,它直接对整个构建过程起作用下面列举了一些我们常用的plugins和他的用法
ExtractTextWebpackPlugin: 它会将入口中引用css文件,都打包都独立的css文件中,而不是内嵌在js打包文件中。下面是他的应用
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var lessRules = {
use: [
{loader: 'css-loader'},
{loader: 'less-loader'}
]
}
var baseConfig = {
// ...
module: {
rules: [
// ...
{test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
]
},
plugins: [
new ExtractTextPlugin('main.css')
]
}
HtmlWebpackPlugin:
作用: 依据一个简单的index.html模版,生成一个自动引用你打包后的js文件的新index.html
var HTMLWebpackPlugin = require('html-webpack-plugin')
var baseConfig = {
// ...
plugins: [
new HTMLWebpackPlugin()
]
}
HotModuleReplacementPlugin: 它允许你在修改组件代码时,自动刷新实时预览修改后的结果注意永远不要在生产环境中使用HMR。这儿说一下一般情况分为开发环境,测试环境,生产环境。
用法如 new webpack.HotModuleReplacementPlugin()
webapck.config.js的全部内容
const webpack = require("webpack")
const HtmlWebpackPlugin = require("html-webpack-plugin")
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var lessRules = {
use: [
{loader: 'css-loader'},
{loader: 'less-loader'}
]
}
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve('./build')
},
devServer: {
contentBase: '/src',
historyApiFallback: true,
inline: true,
hot: true
},
module: {
rules: [
{test: /\.less$/, use: ExtractTextPlugin.extract(lessRules)}
]
},
plugins: [
new ExtractTextPlugin('main.css')
]
}
产品阶段的构建
目前为止,在开发阶段的东西我们已经基本完成了。但是在产品阶段,还需要对资源进行别的
处理,例如压缩,优化,缓存,分离css和js。首先我们来定义产品环境
var ENV = process.env.NODE_ENV
var baseConfig = {
// ...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV)
})
]
}
然后还需要修改我们的script命令
"scripts": {
"start": "NODE_ENV=development webpack-dev-server",
"build": "NODE_ENV=production webpack"
}
process.env.NODE_ENV 将被一个字符串替代,它运行压缩器排除那些不可到达的开发代码分支。
当你引入那些不会进行生产的代码,下面这个代码将非常有用。
if (process.env.NODE_ENV === 'development') {
console.warn('这个警告会在生产阶段消失')
}
优化插件
下面介绍几个插件用来优化代码
OccurenceOrderPlugin: 为组件分配ID,通过这个插件webpack可以分析和优先考虑使用最多 的模块,然后为他们分配最小的ID
UglifyJsPlugin: 压缩代码
下面是他们的使用方法
var baseConfig = {
// ...
new webpack.optimize.OccurenceOrderPlugin()
new webpack.optimize.UglifyJsPlugin()
}
然后在我们使用npm run build会发现代码是压缩的
总结
webpack的配置文件的复杂度,依赖于你项目的需要。小心的运用他们。因为随着项目的增长,它们会变得很难驯服。内容有点多,事实上总结起来也不是特别多,也就Loader,plugins。其他的地方都比较简单。这篇文章大概花了我三天的时间,网上看各种教程,然后看官网,真挺累的。这儿写完我就去睡觉
webpack篇的更多相关文章
- webpack篇,结合理论与实际,加以透彻分析!
Webpack篇 开始着手项目打包的一些东西,还不是特别懂,一边学习,一边做笔记好啦. 1.webpack的概念.Webpack 是当下最热门的前端资源模块化管理和打包工具.任何形式的资源都可以视作模 ...
- 25、前端知识点--webpack篇之面试考点
前端面试之webpack篇 https://blog.csdn.net/sinat_17775997/article/details/78122999 关于webpack的面试题 随着现代前端开发的复 ...
- 前端模块化开发篇之grunt&webpack篇
几个月前写了一篇有关gulp和browserify来做前端构建的博客,因为browserify用来做js的打包时可能有些麻烦(特别是在写React的时候),所以这里再强烈推荐一款js打包工具-webp ...
- webpack-react之webpack篇(http://www.jianshu.com/p/794d573d2c53)
构建一个小项目——FlyBird,学习webpack和react.(本文成文于2017/2/25) 从webpack开始本篇从零开始,详细记录webpack的各个方面.文章中将会放入很多链接以便扩展, ...
- 前端面试题整理—Webpack篇
1.什么是webpack,与grunt和gulp有啥不同 webpack是一个模块打包工具,在webpack里面一切皆模块 通过loader转换文件,通过plugin注入钩子,最后输出有多个模块组合成 ...
- web前端知识点(webpack篇)
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gr ...
- 前端工程化-webpack篇之babel-polyfill与babel-runtime(三)
关于 Babel 如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator.Generator.Set.Maps. ...
- Webpack热加载和React(其中有关于include和exclude的路径问题)
看了几个React配合webpack的教程,大部分都因为版本问题过时了.终于找到了一个不错的教程.记录下其中的知识点. 首先万分感谢这个教程的制作者.少走了许多弯路,正在学习webpack的小伙伴可以 ...
- 前端开发:如何写一手漂亮的 Vue
前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...
随机推荐
- 2019年高校微信小程序开发大赛学习笔记
学做小程序(学堂在线笔记)一.传统布局 text-align:center //水平居中 margin-bottom: 60px //设置间距 二.弹性盒子布局 display:flex; flex- ...
- 2020 还不会泡 Github 你就落伍了
前言 回想起两年前缸接触 GitHub 那会儿,就发现网上完全搜不到一篇关于 github 使用的文章,虽然自己倒腾几下慢慢的也就上手了,但毕竟花费了不少时间. 时间对每个人都是宝贵的,一直很好奇 G ...
- 学妹问的Spring Bean常用配置,我用最通俗易懂的讲解让她学会了
你好呀,我是沉默王二,一枚有趣的程序员,写的文章一直充满灵气,力求清新脱俗.昨天跑去王府井的小米店订购了一台小米 10,说是一周之内能到货,但我还是忍不住今天就想见到她.见我茶不思饭不想的,老婆就劝我 ...
- net core天马行空系列:移植Feign,结合Polly,实现回退,熔断,重试,超时,做最好用的声明式http服务调用端
系列目录 1.net core天马行空系列:原生DI+AOP实现spring boot注解式编程 2.net core天马行空系列: 泛型仓储和声明式事物实现最优雅的crud操作 3.net core ...
- 初创电商公司Drop的数据湖实践
欢迎关注微信公众号:ApacheHudi 1. 引入 Drop是一个智能的奖励平台,旨在通过奖励会员在他们喜爱的品牌购物时获得的Drop积分来提升会员的生活,同时帮助他们发现与他们生活方式产生共鸣的新 ...
- 使用vue-router+vuex进行导航守卫(转)
前言:想要实现登录后才能进入主页等其他页面,不然都会跳转到登录页.但是Vuex有个不够完美的地方,一旦刷新页面就会没了,所以还要用到localStorage. 一.router.js: import ...
- c# winform 访问WebServices (通过Http方式)
第一步.编写WebServices服务方法 [WebMethod] public void PostJson(string str, string bb) { Dictionary<string ...
- CMDB_Agent版本
目录 CMDB_Agent版本 CMDB概念 CMDB_Agent介绍 agent方案 ssh类方案 相比较 架构目录 bin-start.py 启动文件 conf-config.py 自定义配置文件 ...
- 全国职业技能大赛信息安全管理与评估-第三阶段-弱口令自动爆破+读取Flag脚本
自动爆破SSH弱口令+读取Flag #coding=utf-8 import paramiko sshc = paramiko.SSHClient() sshc.set_missing_host_ke ...
- hdu1728 逃离迷宫bfs
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/1728/ 关于广度优先搜索的第一篇题解.广度优先搜索,就是状态树的层次遍历,一层一层的搜索,直到搜索到目标状态为止 ...