Webpack4 入门
栏目: JavaScript · 发布时间: 5年前
内容简介:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
2. 安装
Webpack4 将命令行相关抽离到 webpack-cli 中,所以要使用 webpack 也要安装 webpack-cli。
npm install webpack webpack-cli webpack-dev-server -g
3. 核心概念
webpack 最核心的概念主要有以下四个:
- entry (入口)
- output(输出)
- loader(加载器)
- plugins(插件)
3.1 entry(入口)
entry 指定 weipack 应该使用哪个模块来作为构建内部依赖的开始。多页面应用也在这里配置。
webpack.config.js 的 entry 配置示例如下:
var path = require('path'); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: './src/js/index.js', hello: './src/js/hello.js' } };
3.2 output (输出)
output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。
webpack.config.js 的 output 配置示例如下:
var path = require('path'); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: './src/js/index.js', hello: './src/js/hello.js' }, output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name]-[chunkhash].js' }, };
3.3 loader(加载器)
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建 工具 中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
常用的 loader 有 style、css、url、html等。安装插件命令如下:
npm install --save-dev css-loader style-loader
webpack.config.js 的 loader 配置示例如下:
module.exports = { module: { rules: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015'] } }, { test: /\.css$/, loader: ['style-loader', 'css-loader'] }, { test: /\.html$/, use: [ { loader: "html-loader", options: { attrs: ["img:src"] } } ] }, { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: "url-loader", options: { name: "[name]-[hash:5].min.[ext]", limit: 10000, // size <= 20KB publicPath: "static/", outputPath: "static/" } } ] } ] } };
3.4 plugins(插件)
插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!插件目的在于解决 loader 无法实现的其他事。
webpack.config.js 的 plugins 的配置示例如下:
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { plugins: [ new HtmlWebpackPlugin({ // filename: "index.html", template: "./src/index.html", inject: "head", // chunks: ["src"], // entry中的app入口才会被打包 minify: { // 压缩选项 collapseWhitespace: true }, title: 'webpack test title' }) ] };
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Base64 编码/解码
Base64 编码/解码
HEX CMYK 转换工具
HEX CMYK 互转工具