webpack常用知识点

1.pc端中后台应用打包

npm组件在浏览器的js中不能直接引入，所以要借助webpack等工具

jsx在浏览器端也是无法直接解析，要用工具转换

页面打包速度和资源体积问题

4.构建工具需要原因:

转换es6语法、JSX

css前缀补全/预处理器

压缩混淆

图片压缩

5.webpack原因

github活跃量

社区生态丰富

配置灵活，插件化扩展

官方更新迭代快

6.零配置webpack:

只有entry和output,entry指定默认的entry为： ./src/index.js.

output指定默认的为： ./dist/main.js

>//使用以下命令：

./node_modules/.bin/webpack

生成bundles.js文件.

下一步，在bundles.js同级目录下新建index.html文件，在此文件的script标签的src中引入bundles.js，用浏览器打开，即可

9.在package.json中增加“build”,执行“npm run build”,也可生产bundle.js文件

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build":"webpack"

10.entry用法：

单入口：entry是一个字符串；多入口：entry是个对象（key-value）

11.Output用来告诉we'b'pack如何将编译后的文件输出到磁盘。

output的多入口配置：通过占位符确保文件名称的唯一，如[name].js

12.loaders:

webpack开箱即用只支持js和json两种文件类型，通过loaders去支持其他文件类型并且把它们转化成有效的模块，且可以添加到依赖图中。本身是一个函数，接受源文件作为参数，返回转换的结果。

babel-loader 转换ES6,ES7等js新特性语法

css-loader file-loader等等

module rules中test指定匹配规则，use指定使用的loader名称

13.plugins:

插件用于bundle文件的优化，资源管理和环境变量注入，作用于整个构建过程

任何loaders没法做的事情，可以用plugins完成

CommonChunkPlugin ZipWebpackPlugin....

14.mode:

mode指定当前的构建环境是production development还是none

设置mode可使用webpack内置的函数，默认为production

15.解析ES6 react jsx：

rules:[

{

test:/\.js$/,

use:'babel-loader'

}

]

//安装必要的文件：

npm i @babel/core @babel/preset-env babel-loader -D

*在vscode中的html文件中输入!，在弹出的下来提示中选择“!”，回车，就会出现一个默认的html文件模板出来！

//增加react的babel preset配置：

{

"preset":[

"@babel/preset-env",

"@babel/preset-react"

}

//安装必要的文件：

npm i react react-dom @babel/preset-react -D

16.解析CSS LESS SASS

css-loader用于加载.css文件，并且转换成commonjs对象

style-loader将样式通过<style>标签插入到head中

* <script src="./search.js" type="text/javascript"></script> //其中是type

rules: [

{

test: /.js$/,

use: 'babel-loader'

{

test:/.css$/,

use: [

'style-loader',

'css-loader'

]

{

test: /.less$/,

use: [

'style-loader',

'css-loader',

'less-loader'

]

}

]

//search.css search.less:

.search-text {

font-size: 20px;

color: #f00;

}

转载于:https://www.cnblogs.com/begin256/p/10987964.html

webpack常用知识点相关推荐

Webpack 常用知识点总结
Webpack 常用知识点总结 webpack 是一个模块打包器.webpack 的主要目标是将 javaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transf ...
Vue 2.x 常用知识点笔记（万字笔记）
Vue 2.x 笔记常用知识点笔记,有错误欢迎指点哦~ 字数超过了一万字,得细品目录 Vue 2.x 笔记 1.新建Vue实例 2.阻止生成生产提示 3.模板语法 3.1 插值语法 3.2 指令语 ...
javaScript常用知识点有哪些
javaScript常用知识点有哪些一.总结一句话总结:int = ~~myVar, // to integer | 是二进制或, x|0 永远等于x:^为异或,同0异1,所以 x^0 还是永远等 ...
ES6常用知识点概述
前言国庆假期已过一半,来篇干货压压惊. ES6,并不是一个新鲜的东西,ES7.ES8已经赶脚了.但是,东西不在于新,而在于总结.每个学前端的人,身边也必定有本阮老师的<ES6标准入门>或 ...
webpack常用命令总结
Webpack 常用命令总结构建命令,webpack的常用参数 $ webpack --config webpack.min.js //另一份配置文件$ webpack --display-erro ...
list python 访问键值对_基础|Python常用知识点汇总(中)
字符串字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串.1.创建字符串 str1 = 'Hello World!' str2 = "Hello W ...
matplotlib一些常用知识点的整理，
本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 强烈推荐ipython 无论你工作在什么项目上,IPython都是值得推荐的.利用ipython --pylab,可以进入Py ...
oracle 常用知识点整理
转 : oracle 常用知识点原文链接:http://blog.csdn.net/weijiaxiaobao/article/details/51323573 Oracle 是一个庞大的系统,里 ...
php常用技术与thinkphp5,thinkPHP5框架路由常用知识点汇总
本文实例讲述了thinkPHP5框架路由常用知识点.分享给大家供大家参考,具体如下: 一.路由的模式普通模式(默认pathinfo,不解析路由) 'url_route_on' => false ...

webpack常用知识点

webpack常用知识点相关推荐

最新文章

热门文章