关于webpack 以及 webpack配置和常用插件的学习记录 (1)
主要概念:
- Entry : webpack的入口,构建的第一步从entry开始。
- Output : 输出,经过webpack处理后的得到最终想要的代码。
- Loader : 模块转换工具,把模块的原本内容转换成新的浏览器能看得懂的东西。
- Plugin : 插件,可以注入你需要扩展的东西。
- Module: 在webpack中一切皆模块,一个模块对应一个文件,webpack会从配置的entry开始递归找出所有的模块。
- Chunk : 代码块,用于代码合并和分割。
context:
webpack内相对路径的根目录,默认为webpack所在的当前目录。可配置 (context必须为绝对路径)
module.export = {
context: path.resolve(__dirname, 你要改变的路径)
}
Entry:
入口模块的路径,可以写成 字符串、 数组 和 对象格式。
entry: './index.js' entry: ['./index1.js', './index2.js'] entry: {a: './index1.js', b: ['./index2.js', './index3.js']}
Output :
output配置怎样输出最终想要的代码,为一个对象,包含一系列的配置
1,filename
如果只有一个输出文件,那么直接写 filename: ‘bundle.js’
如果有多个chunk要输出,那么就要用到name变量了,webpack会为每一个chunk取一个名字,这时候就可以根据chunk的名称来区分输出的文件 filename:' [name].js'
2,chunkFilename
配置无入口的chunk在输出时的文件名称。
3,path
配置输出文件在本地存放的目录,必须是string类型的绝对路径。
4,publicPath
5,crossOrginLoading
6,libraryTarge和library
Module:
module是用来配置如何处理模块
1,rules : 配置模块的读取和解析规则,一般是配置loader,类型为一个数组,里面的每一项都用来描述如何去处理匹配的文件。
一般通过test、include和exclude三个配置来匹配loader要应用的文件
选中后的文件通过use配置项来应用loader,可以应用一个loader或者按照前后顺序来应用一组的loader,还可以给loader添加参数。
module: {
rules: [
{
test:/\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
include: path.resolve(__dirname, 'static/css')
},
{
test: /\.js$/, 或者: test: [/\.jsx$/,/\.js$/]
use: ['babel-loader'],
exclude: path.resolve(__dirname, 'node_modules') 或者 exclude: [path.resolve(__dirname,'node_modules'), path.resolve(__dirname, 'nouse_modules')]
}
]
}
2, noParse
让webpack忽略对部分没有采用模块化文件的递归解析和处理。
3,parser
配置哪些模块化功能可以被解析,哪些不解析。 parser可以精确到语法层面上,noParse只能控制哪些文件不解析。
Resolve :
resolve是用来配置webpack怎么寻找模块对应的文件。
1,akias
resolve.alias配置是通过别名来把原来的导入路径映射到一个新的路径
resolve:{
alias: {
'@': resolve('src')
}
}
实际上是把导入语句中的@ 替换成了 '/src'
2,mainFields
有些第三方模块会提供几份不同环境的代码,比如es5代码,es6代码等。mainFields用来配置 引用第三方模块的时候,引用哪个版本的文件。
默认为 mainFields: ['browser', 'main']
3,extensions
在导入的文件没有带文件后缀时,webpack会自动带上extensions里面提供的后缀去寻找文件是否存在。
举例: 在vue项目中,一般写法为 extensions:['.js', '.vue', '.json']
4,modules
resolve。modules是用来配置webpack去哪些目录去找第三方模块。默认是node_modules目录,如果有大量的模块都在 ./src/components 里面,我们可以用modules来优化。
modules: ['./src/components', 'node_modules']
5,descriptionFiles
用来配置第三方模块的文件名称,也就是package.json文件。
6,enforceExtension
如果配置为true,所有的导入文件语句都要带文件后缀。
7,enforceModuleExtension
和enforceExtension作用类似,但只对node_modules下的模块生效。
Plugin:
plugin的配置项接收一个数组,数组的每一项都是要使用的插件的实例,插件需要的参数通过构造函数传入。 下面的插件是生成html文件
const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html'
})
]
}
配置plugin的难点是在 你用的plugin本身需要的配置项。
Target:
让webpack构建出针对不同运行环境的代码。有以下选项:
- web 默认,针对浏览器
- node require语句加载chunk,针对node
- async-node 异步加载chunk
- webworker 针对webworker
.......
DevTool:
配置webpack如何生成source map,默认是false。想让构建的代码生成source map方便调试,可以这样配置:
module.exports = {
devtool: 'source-map'
}
watch:
webpack支持监听文件变化重新编译。默认是关闭的。
在使用devserver时,监听默认是开启的。
Externals:
用来告诉webpack哪些模块不用被打包。
比如我们直接在项目的html中引入了jquery <srcipt src='jquery.min.js'></script>。如果我们需要在模块中使用,可以还需要 import $ from 'jquery',这样就导致了jquery出现了两次。
通过externals配置可以告诉webpack哪些已经引入全局了,针对这些全局的不用打包,可以直接使用全局变量。
module.exports = {
externals: {
jquery: 'jQuery'
}
}
ResolveLoader:
resolveloader告诉webapck如何去找到对应的loader,默认在使用loader时是通过它的包名来引用的。
关于webpack 以及 webpack配置和常用插件的学习记录 (1)的更多相关文章
- 关于webpack 以及 webpack配置和常用插件的学习记录 (2) ------ devServer
DevServer: devserver会启动一个http服务器用于服务网页请求,接收webpack发出的文件变化的信号.通过websocket协议自动刷新网页,实现实时预览. 安装: npm i w ...
- Sublime Text3安装、配置及常用插件(陆续补全中~)
一.安装Sublime Text3 网址:http://www.sublimetext.com/3 注册码:(sublime Text3汉化和激活注册码) ----- BEGIN LICENSE -- ...
- ELK安装和配置及常用插件安装
环境 CentOS 7.3 root 用户 JDK 版本:1.8(最低要求),主推:JDK 1.8.0_121 以上 关闭 firewall systemctl stop firewalld.serv ...
- Eclipse常见配置及常用插件
tomcat为能同时运行多个项目而不崩溃,需要配置一下jvm设置 -Xms1024m -Xmx1024m -XX:PermSize=128m -XX:MaxPermSize=512m
- java.time包常用类API学习记录
Java8出来已那么多年了,java.time包之前一直没有使用过,最近正好有用到,在此做个记录. 上图列出了java.time包下的类,接下来我们详细看下其中每个类的用法. Clock:获取到当前时 ...
- 常用linux命令学习记录
批量替换文件中字符串: sed -i "s/ITSApi/icallApi/g" `grep ITSApi -rl icallbiz` 解释: 将icallbiz目录文件中包涵的I ...
- webpack常用插件配置记录
github仓库:https://github.com/llcMite/webpack.git 1)html-webpack-plugin (用于模板生成html,自动引入output文件) c ...
- webpack 打包过程及常用插件
前言 要理解webpack 首先明白三个概念:module,chunk,bundles,即输入,中间态,输出. chunk: This webpack-specific term is uesd in ...
- webpack 入门和常用插件的使用
常用配置参数 module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, ...
随机推荐
- 什么是Kali Linux?
什么是Kali Linux? Kali Linux是一个基于Debian的Linux发行版,旨在实现高级渗透测试和安全审计.Kali包含数百种工具,适用于各种信息安全任务,如渗透测试,安全研究,计算机 ...
- Math.max()
返回两个指定的数中带有较大的值的那个数.
- export default {} 和new Vue()区别
1.export default 的用法:相当于提供一个接口给外界,让其他文件通过 import 来引入使用. 而对于export default 和export的区别: 在JavaScript ...
- Browsersync 简介 and 使用
简介 省时的浏览器同步测试工具,Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面. 曾经我们每改一次的代码,都需要手动去刷新一次 ...
- Part8-不用内存怎么行_2440内存初始化lesson2
1.2440地址空间 先去找PCB原理图,看CPU引出的内存地址线和数据线的宽度. 说明内存的其实地址是0x30000000为起始地址. 初始化内存其实是去初始化存储器控制器,只有初始化好这个存储器控 ...
- A. Xor-tree
题目意思: 给一颗n个节点的树,每个节点有一个值要么是0要么是1,改变某个节点的值时,它的儿子不变,它儿子的儿子翻转,它儿子的儿子的儿子不变,如此类推.给定各个节点的目标值,求最少的翻转次数,使得达到 ...
- HttpAnalyzerStdV7安装教程
相关链接:HttpAnalyzerStdV7使用教程 安装步骤: 1.解压压缩包 2.双击运行安装文件 3.根据向导提示点击Next 4.选择接受协议,点击Next 5.修改安装路 ...
- 三维GIS
三维GIS数据结构 三维GIS数据库 三维渲染显示 点云处理 cnki:http://kns.cnki.net/kns/brief/default_result.aspx
- python 单双引号交替的json串
单双引号交替的json串 1.常见的json串,类似于这种{"isSucess":true, "name":"yoyo", "st ...
- 【转】.net 在线播放各类视频
原文地址:http://blog.csdn.net/hefeng_aspnet/article/details/9704857 一.后台拼字符串动态加载写法 前台调用代码 <!DOCTYPE h ...