webpack-webpack核心概念(loader、打包静态资源、plugs、sourceMap、devServer、HMR、babel)

什么是loader

由于webpack只能默认识别js文件
所以遇到非js文件就需要利用loader将他解析/放到dist供代码使用
例如：打包一张图片
package.config.json:

const path = require('path');module.exports = {//默认模式（默认为production会压缩 dev不会）mode: 'development',entry: {//在这里配置打包的路径(入口文件名字默认为main)main: './src/index.js'},//一个模块打包的配置（将文件移入dist并返回文件地址）module: {rules: [{//格式特殊处理test: /\.jpg$/,use: {//loaderloader: 'file-loader'} }]},output: {//输出文件名称filename: 'bundle.js',//输出路径__dirname代表当前路径(默认为dist目录)path: path.resolve(__dirname, 'dist')}
}

import avatar from './avatar.jpg';var img = new Image();
img.src = avatar;var root = document.getElementById('root');
root.append(img);

打包图片

rules: [{test: /\.(jpg|png|gif)$/,use: {//一两kb可以loader: 'url-loader',//loader的一些配置options: {//设置名称【占位符】name: '[name]_[hash].[ext]',//打包路径outputPath: 'images/',//超过这些会变成file-loaderlimit: 10240}} },]

打包css

{test: /\.scss$/,use: [//用于编译已经被css-loader结合好的问价'style-loader',{//用于把几个css文件建立联系搞成一个文件loader: 'css-loader',options: {//引入文件的引入文件也按照loader post 这样的方式进行打包importLoaders: 2,//还需要设置style.【需要设置的样式名称】（模块化打包）module: true}},//同css-loader'sass-loader','postcss-loader']}

打包字体

{test: /\.(eot|ttf|svg)$/,use: {loader: 'file-loader'}}

使用plugs使打包更便捷

plugin 类似钩子函数：再webpack在某个时刻自动的做一些事情

删除之前打包的文件

// 引入插件
//自动打包生成index并把需要的东西引入到html中
const HtmlWebpackPlugin = require('html-webpack-plugin');
//删除之前打包的文件
const CleanWebpackPlugin = require('clean-webpack-plugin');

//实例化插件//template 创建的模板 用于将id挂载到适当的位置plugins: [new HtmlWebpackPlugin({template: 'src/index.html'}), new CleanWebpackPlugin(['dist'])],

entry与output基础配置

 entry: {//左侧为键值（文件名称） 右侧为源文件地址main: './src/index.js',sub: './src/index.js'},

 output: {//前缀publicPath: 'http://cdn.com.cn',//output占位符 本身的名称filename: '[name].js',path: path.resolve(__dirname, 'dist')}

sourceMap

告诉开发者哪个位置出错了（源代码）

 //devtool 配置需要使用的devtooldevtool: 'cheap-module-eval-source-map',

文档：sourceMap 官方文档

devServer

动态创建服务并监听

  "scripts": {"bundle": "webpack","watch": "webpack --watch",//监听打包文件 如果变化则重新打包"start": "webpack-dev-server",//重新打包并刷新浏览器"server": "node server.js"},

 //devserver devServer: {//服务器启在哪contentBase: './dist',//自动打开浏览器并访问open: true,//端口地址port: 8080},

也可以自行配置

HMR（热模块更新）

解决重新加载后页面刷新导致之前数据丢失的问题（按模块更新）
有些不想让其他更新但是设置了hotonly之后又不更新
就要这样

vue react 都是自带这些功能来实现

 devServer: {contentBase: './dist',open: true,port: 8080,//开启热加载功能hot: true,//不生效也不刷新hotOnly: true},

 plugins: [new HtmlWebpackPlugin({template: 'src/index.html'}), new CleanWebpackPlugin(['dist']),//加载模块热加载new webpack.HotModuleReplacementPlugin()],

使用babel处理ES6语法

     rules: [{ test: /\.js$/, //排除node moexclude: /node_modules/, //使用babelloader: 'babel-loader',},]

还需要如下配置

对于没有的语法进行补充

放到业务代码最顶部

避免污染全局作用域

整理config文件

直接将写好的babel放在根目录下的babelrc文件中即可

打包react代码

webpack-webpack核心概念(loader、打包静态资源、plugs、sourceMap、devServer、HMR、babel)相关推荐

Webpack4 学习笔记 - 02：loader 打包静态资源（图片）
什么是 loader? 看官网的解释:loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript).loader 可以将所有类型的 ...
react不同环境不同配置angular_DevOps 前端项目(angular、vue、react)打包静态资源生成一份Docker镜像支持部署不同环境...
1.前言为了尽可能地轻量化前端镜像(非node承载),将前端编译成静态资源通过nginx承载. 与后端程序不同的是,当使用静态资源方式时页面是直接加载到浏览器进行渲染,无法读取服务端机器中 env ...
gin embed打包静态资源文件
问题在gin项目中如果单纯的只是实现api接口,那打包出来的是一个可执行文件.但如果项目中如果包含一些页面,则必定会引入一些css,jss,html文件.这样会使打包出来后会挂着对应的静态资源文件夹 ...
uniapp打包静态资源优化
HBuilderx打包是对包的大小有限制的,一般不能超过40M,超过40M则需要缴费打包,好像十块钱一次,虽然不贵,但是长此以往也是一笔不小的费用,且不是解决根源问题的处理方式. 此时,没钱的前端只好 ...
Webpack核心概念解析
原文链接:banggan.github.io/2019/05/09/- Webpack核心概念解析终于忙完了论文,可以愉快的开始学习了,重拾起重学前端.webpack以及Vue的源码解读作为入职前的 ...
webpack-dev-server实现静态资源加载和proxy代理
文章目录 webpack专辑 webpack Dev Server 配置选项 1.静态资源访问 2.Proxy 代理小结 webpack专辑如何使用webpack实现模块化打包? 如何通过Load ...
Vue中引入静态资源的几种方式
最近修改一些老项目,好多组件里面引入图片的方式不太一样,总感觉自己没有好好总结过,今天有时间参考了几篇帖子,就总结一下: 在总结之前看了一下vue-cli的文档,突然感觉之前可能是我忽略它了基本没有看 ...
vue 项目引用static目录资源_详解vue中静态资源的路径问题(深度好文)
前言: webpack中的require解析首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中 ...
wro4j和maven plugin在编译期间压缩静态资源
优化前: 基本上所有的jsp都引用了这一大坨静态文件: <link rel="stylesheet" type="text/css" href=&quo ...