webpack-基础知识
一.webpack介绍
webpack是一个前端模块化工具,简单解释:webpack就是处理多个文件,根据设置的规则,对文件进行合并和修改.
正式说:webpack是一个模块化打包工具.从入口模块出发,识别源码中的模块化导入语句,递归的找出入口模块的所有依赖,将入口和所有依赖打包
我们把合并后的文件叫做模块.
经过webpack修改后的文件在运行时能够兼容更多的浏览器,代码体积更小,性能更好.
webpack是基于node开发的,所以遵守commonjs模块规范
二.webpack规则设置
webpack的规则设置在webpack.config.js文件中.
但是!!!实际开发中,产品有多个环境比如开发环境/测试环境/线上环境,每个环境的配置规则都不同.显然只靠webpack.config.js这一个文件不能满足我们的需求,我们需要拆分webpack.config.js
通常webpack.config.js拆分为3个文件:
- base.config.js 公共配置
- dev.config.js 开发环境配置
- pro.config.js 生产环境/线上环境配置
有了这3文件,webpack.config.js文件就不需要创建了.
webpack执行时会默认查找webpack.config.js.但是我们可以通过修改package.json文件,让webpack执行时使用自定义配置的文件.package.json文件修改方法:
- scripts中的配置项 ---config:指定文件的配置项 --progress:显示文件打包的进度条
- dev:使用webpack-dev-server启动webpack,webpcak启动时读取规则配置项在config文件夹中的dev.config.js
- build:执行npm run build会打包生产环境的代码,webpcak启动时读取规则配置项在config文件夹中的pro.config.js
- 这里没有设置base.config.js的链接,base.config.js是基础配置,要在dev.config.js和pro.config.js中引用
2.1 dev.config.js
通常dev文件用于配置开发规则
2.1.1 dev.config.js基础配置
这里列举了一些常见的配置信息,包括处理scss,跨域等.
运行开发环境语句:yarn dev
const baseConfig = require("./base.config");
//webpack-merge用于合并webpack位于不同文件的配置(数组或对象格式适用)
const webpackMerge = require("webpack-merge");
const path = require("path"); //合并
const config = webpackMerge(baseConfig, {
/*
mode内容webpack提供2种选择:development/production.
每种选择webpcak都会提供的对应的默认配置
参考网站https://segmentfault.com/a/1190000013712229?utm_source=tag-newest
*/
mode: "development",
/*
devtool帮助调试,提供几种方法,将压缩或编译后的文件的代码映射回源文件中原始位置
module.rules允许你在webpack中配置多个loader
use:cssloader的执行顺序 从右到左 从下到上
exclude:排除文件
*/
devtool:"cheap-module-eval-source-map",
module: {
//use中loader执行顺序是从右至左
rules: [
{
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader", "sass-loader"],
exclude: path.join(__dirname, "../node_modules")
}
]
},
/*
dev-server服务器的配置项,在package.json文件script-dev中设置了webpack-dev-server
open:自动打开浏览器
historyApiFallback:找不到界面时默认设置界面
*/
devServer: {
open: true,
port: 9001,
historyApiFallback: {
rewrites: [{
from: /.*/g,
to: '/index.html' //与output的publicPath有关(HTMLplugin生成的html默认为index.html)
}]
},
//代理,用服务器去请求接口
proxy:{
/*
请求地址是/api开头的时候,把请求地址代理到target设置的网址
请求地址:域名后,问号前,比如:http://baidu.com/s?aa=1;/s是地址 ?后面是请求参数
这种跨域不是一定成功如果有token验证就不行
target:代理目标点;changeOrigin为true表示允许跨域代理,pathRewrite值表示将/api替换为空
*/
"/api":{
target:"https://app2.motie.com",
changeOrigin:true,
pathRewrite:{
"^/api":""
}
}
}
}
}) //commonJS规范
module.exports = config;
2.2 base.config.js配置
公共配置
2.2.1 base.config.js基本配置
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
/* __dirname:当前文件的绝对路径 path.join:做路径的拼接 */ //配置webpack module.exports = { //入口的配置 entry: { app: path.join(__dirname, "../src/main.js") }, //出口配置,process.env.NODE_ENV用来判断是开发环境还是生产环境
output: {
path: path.join(__dirname, "../dist"),
filename: process.env.NODE_ENV=="development"?"js/[name].[hash:8].js":"js/[name].js"
},
//使用插件配置项
plugins: [
/*
HtmlWebpackPlugin:生成打包后的html入口文件
title是打包后的html文件标题
filename打包后的html文件名(设置hash名称[hash].html),
*/
new HtmlWebpackPlugin({
template: path.join(__dirname,"./public/index.html"),
filename: "index.html"
}),
//每次打包前清除dist内的内容,重新生成
new CleanWebpackPlugin(),
//拷贝文件夹到dist中:context表示要拷贝的资源地址,from设置拷贝内容,to将静态资源拷贝到包中
//如果不配置的话,打包不会包含public内的文件
new CopyWebpackPlugin([
{
context: path.join(__dirname, "../public"),
//**/*表示文件夹里的文件都可以拷贝
from: "**/*",
to: path.join(__dirname, "../dist"),
//忽略public文件夹下的index.html
ignore: ["index.html"]
}
])
//npm install -D vue-loader vue-template-compiler,在使用vue-loader的时候要先在plugin注册
],
//别名的配置项
resolve: {
//文件引入的优先级,比如import a from './a',查找优先级为:a.js,a.scss,a.art...
extensions: [".js", "scss", "art", "css", "json"],
//别名的配置,相当于给不同的路径起简称
alias: {
"@": path.join(__dirname, "../src"),
"view": path.join(__dirname, "../src/view"),
"controller": path.join(__dirname, "../src/controller"),
"lib": path.join(__dirname, "../src/lib"),
"router": path.join(__dirname, "../src/router"),
"styles": path.join(__dirname, "../src/styles"),
"api":path.join(__dirname,"../src/api"),
"model":path.join(__dirname,"../src/model"),
"utils":path.join(__dirname,"../src/utils")
}
},
//module.rules内配置loader内部的规则,这些loader不需要的不用下载和配置
module: {
rules: [
//一个对象代表一个规则,匹配.js的使用babelloader,排除modules,使用时注意下载相关依赖
{
test: /\.js$/,
loader: "babel-loader",
exclude: path.join(__dirname, "../node_modules")
},
{
//引入非模块化的插件
test: require.resolve('zepto'),
//转化成模块的方式
loader: 'exports-loader?window.Zepto!script-loader'
},
//前端引擎模板
{
test: /\.art$/,
loader: "art-template-loader"
},
{
/*
name是图片原始的名称 ext是文件的后缀名
url-loader一般用来解析一些体积小的图片,可以通过limit来设置图片大小,当图片大小超过limit的设置值,webpack会自动用file-loader解析s
yarn add url-loader file-loader -D
*/
test: /\.(png|jpg|gif|svg)$/,
use: {
loader: "url-loader",
options: {
limit: 2048,
name: "img/[name].[ext]"
}
},
exclude: path.join(__dirname, "../node_modules")
},
//处理字体的配置项
{
test: /\.(woff|woff2|svg|ttf|eot)$/,
use: {
loader: "url-loader",
options: {
name: "font/[name].[ext]"
}
},
exclude: path.join(__dirname, "../node_modules")
}
]
}
}
2.2.2 babel-loader的额外配置
babel相关loader要想正确使用,还需要在根目录下创建.babelrc文件,在该文件内做babel相关loader的配置
.babelrc文件:
//.babelrc文件是json格式
{
"presets": [
[
//低版本的转换
"@babel/preset-env",
{
//设置浏览器版本
"targets":{
//兼容到所有浏览的最后2个版本
"browsers":["last 2 version"]
}
}
]
]
}
2.3 pro生产环境配置
也就是线上发布环境的配置
2.3.1 pro.config.js基本配置
const path = require("path");
const baseConfig = require("./base.config");
const webpackMerge = require("webpack-merge");
const ExtractTextWebpackplugin = require("extract-text-webpack-plugin");
const config = webpackMerge(baseConfig, {
mode: "production",
devtool:"cheap-module-source-map",
module: {
rules: [
{
test: /\.(css|scss)$/,
//css抽离,postcss需要额外配置
//yarn add extract-text-webpack-plugin@next -D
use:ExtractTextWebpackplugin.extract({
//解析css 和sass postcss 用来加浏览器的前缀
use:[
{loader:"css-loader"},
{loader:"postcss-loader"},
{loader:"sass-loader"}
],
fallback: "style-loader",
}),
exclude:path.join(__dirname,"../node_modules")
}
]
},
plugins:[
new ExtractTextWebpackplugin({
//生产出来的文件名称
filename:"css/[name].[hash:8].css"
})
]
}) module.exports = config;
2.3.2 postcss配置
postcss用于给浏览器加前缀,需要在根目录下创建一个postcss.config.js文件,来扩展postcss配置
在pro.config.js文件中我们用到了postcss-loader所以在根目录下创建一个postcss.config.js文件,来扩展postcss配置,配置内容为:
module.exports = {
plugins: [
//自动添加浏览器前缀
require("autoprefixer")({
overrideBrowserslist: [
"defaults",
"Android 4.1",
"iOS 7.1",
"Chrome>31",
"ff>31",
"ie>=8",
"last 2 versions",
">0%"
]
})
]
}
以上一个基础的webpack环境就搭建好了
webpack-基础知识的更多相关文章
- nodejs+gulp+webpack基础知识
nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...
- webpack基础知识
一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webp ...
- Webpack基础知识总结
本文将从多个方面回顾下自己了解的Webpack知识,包括常见的配置项,前端搭建的一些方法和项目实际优化方法,有错误的地方还请指出并多多包涵. 一.关于Webpack 1.概念 本质上,webpack ...
- webpack基础知识介绍
1.开发模式 开发模式顾名思义就是我们开发代码时使用的模式 webpack默认只处理js文件,对样式是没办法处理的.因此要处理css资源需要引入CSS-loader 处理CSS资源 如果要使用 css ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- vue3 自学(一)基础知识学习和搭建一个脚手架
两年前曾自学过几天vue,那时候版本还是vue2,但后来项目中一直没用到,当时也觉得学习成本太高,便没有继续学习下去.初学者可以看下链接文章以前的吐槽~~ 学习 Vue ,从入门到放弃 最近部门决定升 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
- Java基础知识(壹)
写在前面的话 这篇博客,是很早之前自己的学习Java基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
随机推荐
- JS获取链接中的参数
/*获取当前页面链接中的参数*/ function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + ...
- [转] [腾讯游戏学院] Roguelike到底是什么?
如果你是一位资深游戏玩家,那么最近你肯定在哪里看到过 Roguelike 这个词.Roguelike 这个古老的游戏类型现在又变得很潮流,其中各种要素都在不断的被新游戏借鉴.作为一名就是比你有更多空余 ...
- css文本阴影
文本阴影-text-shadow text-shadow 属性向文本添加一个或多个阴影.该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值进行规定,省略的长度是 0. h-sha ...
- AJ学IOS 之CoreLocation反地理编码小Demo输入经纬度得到城市
AJ分享,必须精品 一:效果 输入经纬度,可以得到相应的地名 二:思路 跟地里编码差不多 1.获取用户输入的经纬度 2.根据用户输入的经纬度创建CLLocation对象 3.根据CLLocation对 ...
- AJ学IOS(17)UI之纯代码自定义Cell实现新浪微博UI
AJ分享,必须精品 先看效果图 编程思路 代码创建Cell的步骤 1> 创建自定义Cell,继承自UITableViewCell 2> 根据需求,确定控件,并定义属性 3> 用get ...
- Java并发编程实战 02Java如何解决可见性和有序性问题
摘要 在上一篇文章当中,讲到了CPU缓存导致可见性.线程切换导致了原子性.编译优化导致了有序性问题.那么这篇文章就先解决其中的可见性和有序性问题,引出了今天的主角:Java内存模型(面试并发的时候会经 ...
- SpeedButton
SpeedButton是一个图形控件,本身没有句柄.因此它不能具有焦点.你可以使用TBitBtn,调整一些属性,可以使他们的外形很接近. 只有从TWinControl派生的控件,才具有Handle.你 ...
- stand up meeting 12/9/2015
part 组员 今日工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 -------------- -- ----------- -- PDF Reader 朱玉影 SDK终于差不 ...
- 关于JS垃圾回收机制
一.垃圾回收机制的必要性 由于字符串.对象和数组没有固定大小,所以当它们的大小已知时,才能对它们进行动态的存储分配.JavaScript程序每次创建字符串.数组或对象时,解释器都必须分配内存来存储那个 ...
- 详解 缓冲区(Buffer 抽象类)
在本篇博文中,本人主要讲解NIO 的两个核心点 -- 缓冲区(Buffer) 和 通道 (Channel)之一的 缓冲区(Buffer), 有关NIO流的其他知识点请观看本人博文<详解 NIO流 ...