一、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官方文档学习的更多相关文章

  1. Spring 4 官方文档学习(十二)View技术

    关键词:view technology.template.template engine.markup.内容较多,按需查用即可. 介绍 Thymeleaf Groovy Markup Template ...

  2. Spring 4 官方文档学习(十一)Web MVC 框架之配置Spring MVC

    内容列表: 启用MVC Java config 或 MVC XML namespace 修改已提供的配置 类型转换和格式化 校验 拦截器 内容协商 View Controllers View Reso ...

  3. Spring Data Commons 官方文档学习

    Spring Data Commons 官方文档学习   -by LarryZeal Version 1.12.6.Release, 2017-07-27 为知笔记版本在这里,带格式. Table o ...

  4. Spring 4 官方文档学习(十一)Web MVC 框架之resolving views 解析视图

    接前面的Spring 4 官方文档学习(十一)Web MVC 框架,那篇太长,故另起一篇. 针对web应用的所有的MVC框架,都会提供一种呈现views的方式.Spring提供了view resolv ...

  5. Spring 4 官方文档学习(十一)Web MVC 框架

    介绍Spring Web MVC 框架 Spring Web MVC的特性 其他MVC实现的可插拔性 DispatcherServlet 在WebApplicationContext中的特殊的bean ...

  6. Spring Boot 官方文档学习(一)入门及使用

    个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问题. 其他说明:如果对Spring Boot没有概念, ...

  7. Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(一)

    题外话:本篇是对之前那篇的重排版.并拆分成两篇,免得没了看的兴趣. 前言 在Spring Framework官方文档中,这三者是放到一起讲的,但没有解释为什么放到一起.大概是默认了读者都是有相关经验的 ...

  8. Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(二)

    接前一篇 Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 本篇主要内容:Spring Type Conver ...

  9. Spring boot官方文档学习(一)

    个人说明:本文内容都是从为知笔记上复制过来的,样式难免走样,以后再修改吧.另外,本文可以看作官方文档的选择性的翻译(大部分),以及个人使用经验及问题. 其他说明:如果对Spring Boot没有概念, ...

随机推荐

  1. creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色

    在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件.(此操作不可逆). create-react-app myapp 创建同一个rea ...

  2. mysql数据库 --表查询

    今日内容: 一.单表查询 1.语法执行顺序 2.where约束条件 3.group by 4.having 5.distinct 6.order by 7.limit 8.正则 二.多表查询 1.表查 ...

  3. Q:简单实现URL只能页面跳转,禁止直接访问

    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据,且不同标签页的session不能共享,通过此特性来控制某个页面只能通过上级页面同标签页跳转 ...

  4. The chance for love doesn't come around every day.

    The chance for love doesn't come around every day.爱的机会不是每天都有的.

  5. bzoj1059题解

    [解题思路] 因为只要验证可行性,所以考虑行和考虑列是等价的,故我们只考虑行的交换操作. 这样,拆一波点,把每一行拆成两个点,左边为原交换行,右边为目标交换行,原问题等价于能否对这个二分图进行完全匹配 ...

  6. 主席树/线段树模拟归并排序+二分答案(好题)——hdu多校第4场08

    用主席树写起来跑的快一点,而且也很傻比,二分答案,即二分那个半径就行 主席树求的是区间<=k的个数 #include<bits/stdc++.h> using namespace s ...

  7. pytorch实现kaggle猫狗识别

    参考:https://blog.csdn.net/weixin_37813036/article/details/90718310 kaggle是一个为开发商和数据科学家提供举办机器学习竞赛.托管数据 ...

  8. 让nginx支持patchinfo,(支持codeigniter,thinkphp,ZF等框架)

    nginx 的config配置: server { listen ; server_name xxx; ....if (!-e $request_filename) { rewrite ^/(.*)$ ...

  9. ARC032 D - アットコーダーモンスターズ

    https://arc032.contest.atcoder.jp/tasks/arc032_4# 切比雪夫距离,放在3000*3000的平面上, 一个集合就是恰好包含这个集合的矩形,价值是矩形长.宽 ...

  10. word2vec中关于霍夫曼树的

    再谈word2vec 标签: word2vec自然语言处理NLP深度学习语言模型 2014-05-28 17:17 16937人阅读 评论(7) 收藏 举报  分类: Felven在职场(86)    ...