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基础知识的,所记录的内容,仅仅是当时学习的一个总结随笔.现在分享出来,希望能帮助大家,如有不足的,希望大家支出. 后续会继续分享基础知识手记.希望能 ...
随机推荐
- 【python实现卷积神经网络】padding2D层实现
代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...
- 自动补全、回滚!介绍一款可视化 sql 诊断利器
Yearning简介 ================= Yearning MYSQL 是一个SQL语句审核平台.提供查询审计,SQL审核等多种功能,支持Mysql,可以在一定程度上解决运维与开发之间 ...
- 第三章:shell变量知识进阶
特殊变量:位置变量大于9的时候,需要加上(),例如$(10)$*获取脚本的所有参数,如果不加""和$@是一样的效果,如果加上"",则表示所有参数组成一个字符串$ ...
- tensorflow2.x 报错 Could not load dynamic library 'cudart64_101.dll'
当我们使用 tensorflow 最新版本的时候 ,会出现这样的错误 -- ::] Could not load dynamic library 'cudart64_101.dll'; dlerror ...
- Python logging日志打印
1.logging常用函数Logger.setLevel():设置日志级别Logger.addHandler()和Logger.removeHandler():添加和删除一个handlerLogger ...
- Python的深浅copy详解
Python的深浅copy详解 目录 Python的深浅copy详解 一.浅copy的原理 1.1 浅copy的定义 1.2 浅copy的方法 二.深copy的原理 2.1 深copy的定义 2.2 ...
- 解决vue element table行列不齐问题
全局加入如下样式即可(app.vue): body .el-table th.gutter{ display: table-cell!important; }
- 处理数字的类 —— Math类 、 Random类 、 BigDecimal类 与 BigInteger类
在我们学习C语言时,我们处理数据时要调用很多函数,那么,Java也有很多的方法可以来处理数值的类. 那么,在本篇博文中,本人就来讲解三个用于处理数值的类 -- Math类 . Random类 与 Bi ...
- HTML+CSS教程(二)frameset框架和iframe内嵌
一.框架 (frameset)1.用<frameset></frameset>代替了<body></body>2.rows设置行的占页面的百分比:col ...
- linux上Docker安装gogs私服
一.背景介绍 Gogs 是一款类似GitHub的开源文件/代码管理系统(基于Git),Gogs 的目标是打造一个最简单.最快速和最轻松的方式搭建自助 Git 服务.使用 Go 语言开发使得 Gogs ...