webpack常用加载器、插件总结

日期:2020-05-07编辑作者:Web前端

4.webpack打包优化既能提升速度,又能减小体积

<!DOCTYPE html>
<html>
<head>
<title>webpack demo page</title>
</head>
<body>
<script src="/dist/bundle.js"></script>
</body>
</html>
安装相应的包

1.常用loader及功能

mkdir webpack-demo && cd webpack-demo
npm init -y
创建并进入webpack-demo,初始化一个新的项目,并创建package.json文件,’-y’表示可接受package.json的一对默认值(多个npm使用技巧)
创建目录结构:

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack学习的一个比较难的点便是它的配置与配置的组合,本文总结了webpack中的常用,主流的配置,并简单介绍了webpack在项目中的应用。可以帮助初学者快速的定位所需要的功能,当然每个加载器(loader)插件(plugins)的功能详解用法限于篇幅不能展示,建议大家去npm官网查看其最新配置。因为这方面内容较多,本文会不断迭代。大家可以收藏加关注,并在评论中指出优化的地方。非常感谢注意:本文基于webpack4

├── src
│ ├── main.js
│ ├── assets
│ │ ├── css
│ │ └── img
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock
安装

webpack-dev-server 中配置inline:true或添加插件webpack.HotModuleReplacementPlugin(),

import { ajax } from ‘libs/util’
自动引入vue/jquery ?ProvidePlugin

html-webpack-plugin当使用 webpack 打包时,创建一个 html 文件,并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。

module.exports = {
    entry: './src/main.js',
    output: {
        filename: './dist/bundle.js'
    }
}
npm官网地址::

body {
background-color: #ff0;
}
main.js中引入css资源,会报错,因为没有相应的loader进行处理

let button = document.createElement("button");button.innerText = "播放";button.addEventListener("click", function() { // es6 草案中的语法, 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import import("./source.js").then(data = { // promise对象 console.log(data.default); // 挂载在了default属性上 });});document.body.appendChild(button);

npm i babel-core babel-preset-es2015 -D
在module.rules中添加loader节点

mini-css-extract-plugin将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap

/ 4 /
/***/ (function(module, exports, __webpack_require__) {

eslint-loader语法检测loader,会在打包或编译的时候提示语法问题

npm i file-loader url-loader -D

2.常用插件及功能

配置信息

// webpack.config.jsuse: [{ loader: 'babel-loader', options: { cacheDirectory: true }}]// .bablerc{"presets": [ "env", "react"],"plugins": ["transform-runtime"]}

entry: {
main: './src/main.js',
login: './src/modules/login.js',
product: './src/modules/product.js'
}
上面的入口文件都在src目录下,那么可以设置一个基础目录,绝对路径,用于从配置中解析入口起点(entry point)和加载器(loader)

style-loader处理文件模块中的style样式

It’s like LiveReload for every module.
当模块发生变化时,内存中的bundle会收到通知,如果不影响到整个页面的变化,只会刷新局部,而不用刷新整个页面。
设置hot为true
devServer: {
contentBase: path.join(__dirname, ''),
compress: true,
inline: true,
hot: true, **
port: 8080
},
2.添加到pligins中

postcss-loader第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。

npm run serve
加入进程守护nodemon

reslove :{ alias:{ 'img':resolve('src') }}- import xxx form '../../../aaa'+ import xxx form '@/aaa'

url-loader是对file-loader的封装

babel-loader @babel/code @babel/preset-env babel-polyfill(严格上是个插件)js语法转换工具,可以将ES6或更高级的语法转换成浏览器支持的语法

devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: false,
inline: true,
port: 8080
}
运行

2写代码时使用import引入而不是require

运行

添加插件@babel/plugin-syntax-dynamic-import

  1. 样式 css-loader,style-loader

autoprefixer一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。

原地址:http://blog.csdn.net/Doris_rain/article/details/77942604

2多线程打包happypack

├── src
│ ├── main.js --主入口
│ ├── assets
│ │ ├── css
│ │ └── img
│ ├── libs
│ │ └── util.js --公共方法
│ ├── modules
│ │ ├── login.js --登录页面
│ │ └── product.js --商品页面
├── README.md
├── index.html
├── package.json
├── webpack.config.js
└── yarn.lock

webpack-dev-server中有proxy代理webpack-dev-server中有before(mock功能)拦截请求模拟数据使用中间件webpack-dev-middleware把本地的webpack配置到server

npm i babel-loader -D
安装babel-core和babel-preset-es2015,将ES6的代码转换成ES5

css-loader处理入口文件中的css

// module
exports.push([module.i, "body {n background-color: #ff0;n}n", ""]);

1大文件预打包dllPlugin DLLReferencePlugin

resolve: {
extensions: ['', '.js', '.vue']
}

速度优化

{
test: /.css$/,
loader: ‘style-loader!css-loader’
}
在编译的js代码中我们可以看到

热更新

webpack
dist目录下生成bundle.js文件
webpack其他参数

3异步加载资源const Foo = () = import('./Foo.vue');

  1. 多页应用

2外部引用cdn

nodemon进程守护,用来监控你node.js源代码的任何变化,自动重启服务

1去除映射文件sourceMapdevtool:false

chrome控制台打开我们可以看到,说明HMR已经开启
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
附:webpack修改每次都重启?nodemon守护

路径简写

简单配置

bannerPlugin(webpack)版权字符串

plugins: [
new webpack.HotModuleReplacementPlugin() //热加载插件
],

webpack-dev-server启动一个本地临时的服务器,可以设置端口,支持热更新(将HotModuleReplacementPlugin插入到进程中),

}
loader是比较核心的一块内容,它将各类静态资源通过loader转换为js模块,一个loader包含以下几部分

3babel-loader开启缓存

  1. 省略文件扩展名?resolve.extensions

uglifyjs-webpack-plugin压缩优化js

"scripts": {
"start": "nodemon --exec webpack -w webpack.config.js",
"serve:watch": "nodemon --exec webpack-dev-server -w webpack.config.js"
}
页面实时刷新 Hot Module Replacement(HMR) 热加载

dllPlugin在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

new webpack.ProvidePlugin({
Vue: ‘Vue’
})
代码中可以不用引入vue直接使用vue

3.开发中常用的功能跨域解决

test: 一个匹配loaders所处理的文件的拓展名的正则表达式(必须)
loader: loader的名称(必须)
include/exclude: 添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选)
query: 为loaders提供额外的设置选项(可选)
1.ES6语法的js babel-loader

4resolve ailas添加常用包的路径

npm i css-loader style-loader -D

本文由www.129028.com金沙发布于Web前端,转载请注明出处:webpack常用加载器、插件总结

关键词:

nginx负载均衡如何实现www.129028.com金沙?

什么是nginx? Nginx是一个免费的,开源的,高性能的服务器和反向代理服务器软件,同时它也可以为IMAP和POP3服务器代...

详细>>

最少编码原则

这的确是大多数程序员,甚至是那些高级程序员都很容易混淆的一个重点。作为一名程序员,编写代码无疑是你职业...

详细>>

CSS中cursor 鼠标指针光标样式

值 前面url()是自定义鼠标的样式,图像的地址,后面的参数是 css 标准的 cursor样式,(IE下面可以不需要) 出现版本...

详细>>

AJAX:如何处理书签和后退按钮(1)

或者如果你不喜欢onclick: window.onload = initialize;function initialize() { // initialize the DHTML History // framework dhtmlHistory.initial...

详细>>