webpack基本使用流程(react)

1.安装webpack脚手架

cnpm install webpack webpack-cli -D

2.安装处理css的loader

cnpm install style-loader css-loader node-sass sass-loader postcss-loader -D

3.安装处理js的loader

cnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D

tip:react 新增install@babel/preset-react

4.安装处理图片的loader

cnpm install file-loader url-loader -D

5.安装html-webpack-plugin clean-webpack-plugin

cnpm install html-webpack-plugin clean-webpack-plugin -D

6.自动添加浏览器前缀

cnpm install autoprefixer -D

7.安装开发环境中所需要的服务

cnpm install webpack-dev-server -D  //开发环境不需要打包,故使用webpack-dev-server启动服务,记得在json文件做配置

8.安装生产环境抽离css的插件

cnpm install extract-text-webpack-plugin@next -D  //不抽离css会导致css混入js中,导致代码的紊乱以及体积

tip:@next安装最新版本

启动文件

webpack打包的时候默认会找到目录下webpack.config.js文件,

合并文件

安装webpack配置项

cnpm install webpack-merge -D //开发或者生产模式的时候将使用它作为合并

.babelrc文件用于bebel处理之后的浏览器兼容的版本,一般配置兼容到浏览器最后2个版本

{
"presets": [
[
"@babel/preset-env",
{
"targets":{
"browsers":["last 2 versions"]
//兼容到浏览器最后2个版本
}
}
]
]
}

postcss.config.js

autoprefixer为不同的浏览器自动添加css样式前缀

举例:由于项目配置了scss,我们用这个示范,可以看的浏览器的测试结果已经添加好了前缀



module.exports = {
plugins:[
require("autoprefixer")({
overrideBrowserslist:[
"defaults",
"Android 4.1",
"iOS 7.1",
"Chrome>31",
"ff>31",
"ie>=8",
"last 2 versions",
">0%"
]
})
]
}

config文件用于webpack的配置项,一般为三个文件,base模式,开发模式,生产模式

此处展示为base文件,base为开发生产都需要用到的文件

const path = require('path')
//生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口
const HtmlWebapackPlugin = require('html-webpack-plugin')
//对于每一次生成的dist做更新
const {CleanWebpackPlugin} = require('clean-webpack-plugin') //引入的插件请务必在plugin中做实例化
//入口文件出口文件
const PATH = {
app:path.join(__dirname,"../src/main.js"),
build:path.join(__dirname,"../dist")
} module.exports = {
entry:{
app:PATH.app
},
output:{
filename:process.env.NODE_ENV == "development"?"[name].[hash:8].js":"js/[name].js",
path:PATH.build
},
//使用插件
plugins:[
new HtmlWebapackPlugin({
filename:"index.html",
template:"./public/index.html"
}),
new CleanWebpackPlugin()
],
//别名配置
resolve:{
extensions:[".jsx",".js",".json"],
alias:{
}
},
//处理模块
module:{
rules:[
//js文件处理
{
test:/\.(js|jsx)$/,
loader:"babel-loader",
exclude:path.join(__dirname,"../node_modules")
},
//图片处理
{
test:/\.(png|jpg|gif|svg)$/,
use:{
loader:"url-loader",
options:{
limit:2048,
name:"image/[name].[ext]"
}
}
},
//字体处理
{
test:/\.(woff|svg|woff2|eot|ttf)$/,
use:{
loader:"url-loader",
options:{
name:"iconfont/[name].[ext]"
},
},
exclude:path.join(__dirname,"../node_modules")
}
]
}
}

运行npm run build 成功打包之后

webpack模块打包简易版的更多相关文章

  1. webpack入门——构建简易版vue-cli

          前言:(面试让介绍webpack,你可以这么答)简单地说,Webpack其最核心的功能就是 解决模板之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并成一个JS文件(比如bun ...

  2. python3用http.server模块搭建简易版服务器

    基本流程: 1.需要的支持 1)python3用http模块下的子模块,即:http.server模块 2)将希望共享的文件放在c盘下,如:C:\游戏行业面试专用 2.打开cmd,cd c:\\pyt ...

  3. 探索 模块打包 exports和require 与 export和import 的用法和区别

    菜单快捷导航: CommonJS 之 exports和require用法 ES6 Module 之 export 和 import 用法 CommonJS和ES6 Module的区别 循环依赖 和 解 ...

  4. Webpack - CommonJs & AMD 模块打包器

    Webpack 是一个 CommonJs & AMD 模块打包器.可以把你的 JavaScript 代码分离为多个包,在需要的时候进行加载,支持预处理文件,例如 json, jade, cof ...

  5. 实现一个简易版webpack

    现实 webpack 的打包产物 大概长这样(只把核心代码留下来): 实现一个简版的webpack 依葫芦画瓢,实现思路分2步: 1. 分析入口文件,把所有的依赖找出来(包括所有后代的依赖) 2. 拼 ...

  6. webpack前端模块打包器

    webpack前端模块打包器 学习网址: https://doc.webpack-china.org/concepts/ http://www.runoob.com/w3cnote/webpack-t ...

  7. 模块打包 webpack

    1.模块打包工具 2.工作方式: 1)将存在依赖关系的模块按照特定规则合并为单个JS文件,一次全部加载进页面中 2)在页面初始时加载一个入口模块,其他模块异步的进行加载 3.优势: 1)支持AMD,C ...

  8. Python写地铁的到站的原理简易版

    Python地铁的到站流程及原理(个人理解) 今天坐地铁看着站牌就莫名的想如果用Python写其工作原理 是不是很简单就小试牛刀了下大佬们勿喷纯属小弟个人理解 首先来看看地铁上显示的站牌如下: 就想这 ...

  9. [Android Studio] Android studio 多渠道打包(超简洁版)

    [Android Studio] Android studio 多渠道打包(超简洁版) 转载:http://xuyazhou.com/archives/461 http://relex.me/usin ...

  10. Webpack模块加载器

    一.介绍 Webpack是德国开发者 Tobias Koppers 开发的模块加载器,它能把所有的资源文件(JS.JSX.CSS.CoffeeScript.Less.Sass.Image等)都作为模块 ...

随机推荐

  1. html5快速入门(四)—— JavaScript

    前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...

  2. VC++双缓冲保持背景不擦除之实现

    几天前,我终于克服了C++窗体重绘时的闪烁问题,用到的技巧就是双缓冲.但是怎样保持住已经绘制的图形呢?也就是仿照Windows自带的画图程序一般,动态的做出一条直线.最容易想到的方法是在MouseMo ...

  3. phpcms:八、show.html

    标题:{$title}来源:{$copyfrom}评论:<a href="#comment_iframe" id="comment">0</a ...

  4. MarkDown 例子

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  5. require和require_once的区别

    require 的使用方法如 require("./inc.php"); .通常放在 PHP 程式的最前面,PHP 程式在执行前,就会先读入 require 所指定引入的档案,使它 ...

  6. Asp.Net WebAPI配置接口返回数据类型为Json格式

    Asp.Net WebAPI配置接口返回数据类型为Json格式   一.默认情况下WebApi 对于没有指定请求数据类型类型的请求,返回数据类型为Xml格式 例如:从浏览器直接输入地址,或者默认的XM ...

  7. C++设计模式——中介者模式

    前言 我们都知道,这个国际政治是一门很深的学问,不玩政治的人是搞不懂的.那么多的国家,国家之间的关系又及其复杂:就好比现在,美国和中国有经济利益关系,美国又和日本有盟友关系,朝鲜又和中国有说不清道不明 ...

  8. 浅析列表页请求优化(history API)

    最近搞了下列表页请求的功能,并做了一下调研整理,记此文备忘. 列表页请求的功能到处可见,比如在博客园. 点击相应的页码,页面返回相应的内容,看上去似乎大同小异,但是一些小的细节还是可以区分优劣. fu ...

  9. django的forms认证组件

    django的forms认证组件 每个网站的注册界面都需要有相应的"认证"功能,比如说认证注册页面的用户名是否已被注册,二次输入的密码是否一致以及认证用户输入的用户名.邮箱.手机号 ...

  10. 《objective-c基础教程》学习笔记(四)—— OC面向对象编程初探

    在上篇博文中,我们编写了一个可以输出不同几何类型的小程序.通过C语言的struct结构体,给大家感受了下,对象的大概样子. 如果用Obejctive-C的面向对象的特征来实现.那么,drawShape ...