来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

【网上澳门金莎娱乐】【webpack】入门Demo

时间: 2019-09-07阅读: 96标签: 总结前言

概述

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

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack在开发中可以使用 JavaScript 处理你的依赖关系和加载顺序,避免意外引入一些你不需要在生产中用上的 CSS 样式表和 JS 库,使项目膨胀,或重复载入某些js,css等库。

npm官网地址::

使用webpack

1.常用loader及功能

初始化项目

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

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

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

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

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

npm i webpack -D
webpack.config.js

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

配置信息

file-loader处理引入的静态文件,可以按目录分类

  1. 入口(entry):告诉webpack打包从哪里开始
  2. 输出(output):如何处理打包代码及打包输出到什么位置
  3. 加载器(loaders):通过loader识别出各种资源,将这些文件转换为模块
  4. 插件(plugins):由于加载器仅基于单个文件执行转换,插件可以做一些更复杂的操作及自定义功能

url-loader同file-loader,处理引入的静态文件,还可以把小文件转换为base64格式的URL,从而减少网络请求次数。url-loader依赖file-loader。

简单配置

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

module.exports = {
    entry: './src/main.js',
    output: {
        filename: './dist/bundle.js'
    }
}

2.常用插件及功能

运行

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

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

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

  • webpack -p – 进行优化压缩处理,相当于设置process.env.NODE_ENV="production"
  • webpack --watch – 持续监听构建
  • webpack -d – debug模式,包含source maps
  • webpack --display-error-details - 显示详细的打包出错信息
  • webpack -h 查看更多的信息,常见的还有--colors,--progress
  • webpack --config XXX.js //使用另一份配置文件(比如webpack.config2.js)来打包
    加载更多资源 –使用loader

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

栗子:

optimize-css-assets-webpack-plugin压缩优化css

{
test: /.js$/, 
loader: 'babel-loader', 
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,

uglifyjs-webpack-plugin压缩优化js

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

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

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

CleanWebpackPlugin能帮忙每次打包之前先删除dist文件夹。

babel-loader安装相应的包

copyWebpackPlugin可以把其他的文件或文件夹拷贝到打包文件里

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

bannerPlugin(webpack)版权字符串

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

ignorePlugin忽略掉引入的包

module: {
rules: [{
test: /.js$/,
loader: 'babel-loader',
query: {presets: ['es2015']}
}]
}

webpack-merge可以抽取出 开发与生产环境的相同的webapck配置。vue里的配置文件dev.config.js, prod.config.js就基于这个插件

  1. 样式 css-loader,style-loader

html-withimg-plugin处理html中的img

src/assets/css下新建style.css

definePlugin定义环境变量

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

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

require(‘./assets/css/style.css’)
添加loader处理

DLLReferencePlugin这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

npm i css-loader style-loader -D

happypack多线程打包

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

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

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

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

exports = module.exports = __webpack_require__(1)(undefined);
// imports

路径简写

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

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

// exports

热更新

/***/ }),

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

  1. 图片 file-loader url-loader

懒加载

url-loader是对file-loader的封装

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:【网上澳门金莎娱乐】【webpack】入门Demo

关键词: