webpack官方文档学习
一、webpack是什么?
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
二、安装
前提条件:
确保安装了Node.js的最新版本。(旧版本可能遇到各种问题)
本地安装:
要安装最新版本或特定版本,请运行以下命令之一:
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本,你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目,我们建议本地安装。这可以让我们在引入破坏式变更的依赖时,更容易分别升级项目。
全局安装:
以下的 NPM 安装方式,将使 webpack
在全局环境下可用:
npm install --global webpack
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。
最新体验版本:
npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>
安装这些最新体验版本时要小心!它们可能仍然包含 bug,因此不应该用于生产环境。
三、起步
创建目录,初始化npm,并安装webpack和webpack-cli:
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
现在我们将创建以下目录结构、文件和内容:
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
var element = document.createElement('div'); // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element;
} document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
另外我们还需要调整pageage.json文件,以便确保我们安装包是私有的(private)
,并且移除 main
入口。这可以防止意外发布你的代码。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,//确保是私有的
- "main": "index.js",//移除,可以防止意外发布你的代码
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9"
},
"dependencies": {}
}
创建一个bundle文件:
首先,我们稍微调整下目录结构,将“源”代码(/src
)从我们的“分发”代码(/dist
)中分离出来
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
要在 index.js
中打包 lodash
依赖,我们需要在本地安装 library:
npm install --save lodash
如果要安装一个打包到生产环境的安装包,应该使用npm install --save;安装一个打包到开发环境的安装包,应该使用:npm install --save-dev。
现在,在我们的脚本中 import lodash:
src/index.js
import _ from 'lodash';
因为现在是通过 import
引入 lodash,所以将 lodash <script>
删除,然后修改另一个 <script>
标签来加载 bundle,而不是原始的 /src
文件:
dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
修改完成之后,执行 npx webpack,我们的脚本将作为入口起点,然后输出为main.js。
在浏览器中打开 index.html
,如果一切访问都正常,说明构建成功。
使用一个配置文件:
在webpack 4 中,可以无需任何配置,但是大多数项目需要更复杂的配置,这就是为什么webpack需要支持配置文件;这比在终端(terminal)中手动输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件:
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在,让我们通过新配置文件再次执行构建:
npx webpack --config webpack.config.js
如果 webpack.config.js
存在,则 webpack
命令将默认选择使用它。我们在这里使用 --config
选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。
npm脚本:
如果 webpack.config.js
存在,则 webpack
命令将默认选择使用它。我们在这里使用 --config
选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。所以我们可以设置一种快捷方式(添加一个npm脚本):
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.9",
"lodash": "^4.17.5"
}
}
现在,可以使用 npm run build
命令,来替代我们之前使用的 npx
命令。
现在运行以下命令,然后看看你的脚本别名是否正常运行:
npm run build
结论:
到此,我们就实现了一个基本的构建过程,目录结构如下:
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules
如果你使用的是 npm 5,你可能还会在目录中看到一个 package-lock.json
文件。
四、管理资源
在 webpack 出现之前,前端开发人员会使用 grunt 和 gulp 等工具来处理资源。
加载css
安装并添加 style-loader 和 css-loader):
npm install --save-dev style-loader css-loader
webpack.config.js
const path = require('path'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
加载图片
npm install --save-dev file-loader
{
test:/\.(png|svg|jpg|gif)$/,
use:[
'file-loader'
]
},
加载字体
file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。
{
test:/\.(woff|woff2|eot|ttf|otf)$/,
use:[
'file-loader'
]
},
加载数据
npm install --save-dev csv-loader xml-loader
{
test:/\.(csv|tsv)$/,
use:[
'csv-loader'
]
},
{
test:/\.xml$/,
use:[
'xml-loader'
]
},
五、管理输出
管理bundle依赖
html-webpack-plugin可以自动给html添加bundle文件
npm install --save-dev html-webpack-plugin
webpack.config.js
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ title: 'Output Management'
+ })
+ ],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
清理dist文件夹
npm install clean-webpack-plugin --save-dev
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
plugins: [
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
六、开发
webpack官方文档学习的更多相关文章
- Spring 4 官方文档学习(十二)View技术
关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...
- Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC
内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...
- Spring Data Commons 官方文档学习
Spring Data Commons 官方文档学习 -by LarryZeal Version 1.12.6.Release, 2017-07-27 为知笔记版本在这里,带格式. Table o ...
- Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图
接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolv ...
- Spring 4 官方文档学习(十一)Web MVC 框架
介绍Spring Web MVC 框架 Spring Web MVC的特性 其他MVC实现的可插拔性 DispatcherServlet 在WebApplicationContext中的特殊的bean ...
- Spring Boot 官方文档学习(一)入门及使用
个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问题. 其他说明:如果对Spring Boot没有概念, ...
- Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(一)
题外话:本篇是对之前那篇的重排版.并拆分成两篇,免得没了看的兴趣. 前言 在Spring Framework官方文档中,这三者是放到一起讲的,但没有解释为什么放到一起.大概是默认了读者都是有相关经验的 ...
- Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(二)
接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...
- Spring boot官方文档学习(一)
个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问题. 其他说明:如果对Spring Boot没有概念, ...
随机推荐
- creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色
在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...
- mysql数据库 --表查询
今日内容: 一.单表查询 1.语法执行顺序 2.where约束条件 3.group by 4.having 5.distinct 6.order by 7.limit 8.正则 二.多表查询 1.表查 ...
- Q:简单实现URL只能页面跳转,禁止直接访问
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...
- The chance for love doesn't come around every day.
The chance for love doesn't come around every day.爱的机会不是每天都有的.
- bzoj1059题解
[解题思路] 因为只要验证可行性,所以考虑行和考虑列是等价的,故我们只考虑行的交换操作. 这样,拆一波点,把每一行拆成两个点,左边为原交换行,右边为目标交换行,原问题等价于能否对这个二分图进行完全匹配 ...
- 主席树/线段树模拟归并排序+二分答案(好题)——hdu多校第4场08
用主席树写起来跑的快一点,而且也很傻比,二分答案,即二分那个半径就行 主席树求的是区间<=k的个数 #include<bits/stdc++.h> using namespace s ...
- pytorch实现kaggle猫狗识别
参考:https://blog.csdn.net/weixin_37813036/article/details/90718310 kaggle是一个为开发商和数据科学家提供举办机器学习竞赛.托管数据 ...
- 让nginx支持patchinfo,(支持codeigniter,thinkphp,ZF等框架)
nginx 的config配置: server { listen ; server_name xxx; ....if (!-e $request_filename) { rewrite ^/(.*)$ ...
- ARC032 D - アットコーダーモンスターズ
https://arc032.contest.atcoder.jp/tasks/arc032_4# 切比雪夫距离,放在3000*3000的平面上, 一个集合就是恰好包含这个集合的矩形,价值是矩形长.宽 ...
- word2vec中关于霍夫曼树的
再谈word2vec 标签: word2vec自然语言处理NLP深度学习语言模型 2014-05-28 17:17 16937人阅读 评论(7) 收藏 举报 分类: Felven在职场(86) ...