webpack安装
- 确保安装 Node.js 的最新版本
- 本地安装
(对于大多数项目，官方建议本地安装。这可以使我们在引入破坏式变更的依赖时，
更容易分别升级项目)
最新的webpack版本是：
// 要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>
// 如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
// 全局安装
(官方不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，
并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。)
npm install --global webpack
webpack起步
1.基本安装
//首先我们创建一个目录，初始化 npm，然后 在本地安装 webpack，
//接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：
windows+r 输入cmd 打开终端
vscode打开终端ctrl+~
安装了git 桌面右键选择Git bash here
执行以下命令
1.创建一个文件夹，并进入这个文件夹
mkdir demo && cd demo
2.从当前目录中提取的信息生成默认的package.json
npm init -y
3.安装webpack-cli
npm install webpack webpack-cli --save-dev
现在我们将创建以下目录结构、文件和内容，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载:
在demo项目下，新建src dist 文件夹,
在src下新建index.js
在dist下新建 index.html
-demo
-dist
-index.html
-src
-index.js
目录：src/index.js
function component() {
var element = document.createElement('div');
element.innerHTML = 'hello webpack'
return element;
}
document.body.appendChild(component());
目录：dist/index.html
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件
命令执行后再dist目录下会打包多出一个main.js
使用一个配置文件
在 webpack 4 中，可以无须任何配置使用，然而大多数项目会需要很复杂的设置，这就是为什么 webpack 仍然要支持 配置文件。这比在终端(terminal)中手动输入大量命令要高效的多，所以让我们创建一个取代以上使用 CLI 选项方式的配置文件：
在项目文件夹demo下新建
目录：webpack.config.js:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
这样用配置文件之后，打开dist文件将main.js删除
打开index.html
将原先：
<script src="main.js"></script>
修改为
<script src="bundle.js"></script>
执行：npx webpack –config webpack.config.js
打开index.html
会看到让然输出 Hello webpack
比起 CLI 这种简单直接的使用方式，配置文件具有更多的灵活性。
我们可以通过配置方式指定 loader 规则(loader rules)、
插件(plugins)、解析选项(resolve options)，以及许多
其他增强功能。了解更多详细信息，请查看官方配置文档。
后边会主要说下webpack.config.js的配置项
构建一个简单的NPM 脚本(NPM Scripts)
考虑到用 npx webpack –config webpack.config.js 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。
在 package.json 添加一个 npm 脚本(npm script)：
打开package.json:
在scripts 对象中添加 { “build”: “webpack” }
如下 :
{
"name": "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.15.1",
"webpack-cli": "^3.0.8"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
**现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令**
webpack.config.js的配置及使用
上边已经说了webpack的简单配置,以后你的项目的所有配置都会在webpack.config.js中
对此文件做个简单的说明的配置说明前，需要理解的几个概念：
文档地址：https://www.webpackjs.com/concepts
四大概念：
entry output loader plugins
// 指示webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
入口(entry)
//告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
输出(output)
// loader 让 webpack 能够去处理那些非 JavaScript 文件，
// 比如css img等（webpack 自身只理解 JavaScript）
// 在 webpack 的配置中 loader 有两个目标：
// test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
// use 属性，表示进行转换时，应该使用哪个 loader。
loader
// 插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义
// 环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
插件(plugins)
介绍完概念，来看看具体怎那么使用
打开webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HappyPack = require('happypack');
// 安装一个插件
// cnpm install html-webpack-plugin；
// 插件的使用及配置请自己百度
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 文件入口
entry: './src/index.js',
// 文件出口
// path.resolve（）方法将一系列路径或路径段解析为绝对路径。参见node
// 语法：path.resolve([from ...], to)
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 提供 mode 配置选项，告知 webpack 使用相应模式的内置优化,
// 一般用来配置开发还是生产模式，及开发环境，线上环境。
mode: 'production' || "development",
/**
* loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时
* 预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前
* 端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）
* 转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在
* JavaScript 模块中 import CSS文件！
*/
/**
* 安装css ，ts loader 处理css typascript
* npm install --save-dev css-loader
* npm install --save-dev ts-loader
*/
// module test：哪些文件 被转译 use：用哪些loader 转化
// 安装es6 语法转换器bable
// npm install babel-cli --save-dev
module: {
rules: [{
test: /\.css$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
},
// 安装babel-loader
// npm install--save - dev babel - loader babel - core
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
}]
}
]
},
// 插件使用
plugins: [
//自动生成index.html文件
new HtmlWebpackPlugin({
filename: 'index.html',
title: 'Hot Module Replacement'
}),
new webpack.HotModuleReplacementPlugin(),
new HappyPack({
// 3) re-add the loaders you replaced above in #1:
loaders: ['babel-loader?presets[]=es2015']
}),
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: ['babel-loader']
}),
new HappyPack({
id: 'styles',
threadPool: happyThreadPool,
loaders: ['style-loader', 'css-loader', 'less-loader']
})
],
// 使用 webpack-dev-server 热加载服务器
// 安装 ： npm install --save-dev webpack-dev-server
// webpack-dev-server 为你提供了一个简单的 web 服务器，
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
hot: true,
port: 9000
}
};
…babelrc文件
{
"presets": ["es2015"]
}
你想要什么插件，怎么安装配置，请参开
https://www.npmjs.com/
package.json文件：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"css-loader": "^1.0.0",
"happypack": "^5.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"webpack": "^4.15.1",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"lodash": "^4.17.10"
}
}