webpack
安装
//全局安装
npm install -g webpack
//安装到项目目录
npm install --save-dev webpack使用webpack前的准备
1.创建 package.json 文件，这是又一个标准的 npm 说明文件，使用 npm init 命令可以自动创建这个文件
npm init2.在全局安装webpack作为依赖包
//安装webpack
npm install -g webpack3.项目目录结构
index.html 主要是为了引入打包后的 js 文件，这里我们默认打包后的 js 文件为 bundle.js
Document
greeter.js 定义一个返回包含问候信息的html元素的函数,并导出这个函数为一个模块
//greeter.js
module.exports = function () {
var greet = document.createElement('div');
greet.textContent = "hello webpack";
return greet;
};main.js 为主 js 文件
//main.js
var greeter = require('./greeter.js');
document.querySelector("#root").appendChild(greeter());通过设置配置文件来使用webpack
在项目的根目录下新建一个名为webpack.config.js的文件，并写好配置信息（文件名不能修改）
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}然后只需要在终端下运行 webpack 命令实现打包操作，运行结果如下表示打包成功
可以看到 public 目录中多了一个文件 bundle.js ，即为打包后的文件
直接在浏览器中打开 index.html 文件，可以看到效果，表示打包是成功的
关于打包时的警告问题
webpack 更新到 4.0.0 后，必须在“开发或者生产”模式中选择一种模式
我找到了 2 种解决办法：
1.在执行打包命令时带入模式
webpack --mode developmentwebpack --mode production2.在 package.json 文件中加入引导
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13"
}
}在终端执行
npm run dev可以看到执行结果也是成功的
使用 webpack 构建本地服务器
想使用 webpack 构建本地服务器，需要独立安装 webpack-dev-server 作为依赖
npm install --save-dev webpack-dev-server在 webpack.config.js 中添加相应的配置信息
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
port: '3000'
}
}在 package.json 文件中添加引导，用以开启本地服务器
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"server": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}
在终端中执行
npm run server会自动可开启服务，并打开本地服务器所加载的页面
缓存的问题
缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变），webpack可以把一个哈希值添加到打包的文件名中
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle-[hash].js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
port: '3000'
}
}重新执行打包的命令
npm run dev可以看到打包后的文件名带上了 hash 值，只要文件有修改，重新打包后的文件 hash 值就会改变，可以有效的避免缓存的问题
插件的使用
# HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
安装
npm install --save-dev html-webpack-plugin在项目的根目录下新建文件夹 build 用于存放生成的 index.html 和 bundle.js （自动生成）
在项目的根目录下新建文件夹 tmpl 用于存放模板
在 tmpl 目录下新建文件 index.tmpl.html，不需要引入打包后的文件
Document
更新 webpack 的配置文件（webpack.config.js）
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/build",// 修改了此处的目录，打包后的文件存放的地方
filename: "bundle-[hash].js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
port: '3000'
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/tmpl/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
})
]
}执行 打包命令
npm run dev执行结果为
build 文件夹中可以看到新生成的 index.html 和 打包后的 js 文件
# clean-webpack-plugin
添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多
修改 greeter.js 的内容
module.exports = function () {
var greet = document.createElement('div');
greet.textContent = "hello webpack hello world";
return greet;
};再次执行 打包命令
npm run dev可以发现 build 中多了一个打包文件，并且 index.html 中引入的 js 文件也改变为了新的打包文件，此时旧的打包文件也就没有用了
安装插件
npm install --save-dev clean-webpack-plugin更新 webpack 的配置文件（webpack.config.js）
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/build",// 修改了此处的目录，打包后的文件存放的地方
filename: "bundle-[hash].js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
port: '3000'
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + "/tmpl/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
}),
new CleanWebpackPlugin('build/*.*', {
root: __dirname,
verbose: true,
dry: false
})
]
}删除 build 中没有被要引用的打包文件
修改 greeter.js 文件
module.exports = function () {
var greet = document.createElement('div');
greet.textContent = "hello webpack hello world hello clean-webpack-plugin";
return greet;
};执行打包命令
npm run dev运行成功后可以看到 build 文件夹中的打包文件的名称变了，也就是自动删除了以前的打包文件，并且生成了新的打包文件，index.html 的引入文件也自动 修改为新的打包文件
