1.创建配置项
在项目根目录下创建配置项：
npm init
一直回车，最后在根目录下自动生成了package.json文件，上图：
2.安装
2.1、安装Webpack到项目本地
安装Webpack到本项目时，可根据自己的需求安装：
# npm i -D 是 npm install --save-dev 的简写
安装最新的稳定版：
# npm i -D web pack安装指定版本：
# npm i -D webpack@<version>安装最新的体验版本：
# npm i -D webpack@beta
2.2、安装Webpack到全局
安装到全局后，我们可以在任何地方公用一个Webpack可执行文件，而不用各个项目重复安装，命令如下：
`npm install -g web pack
以上两种方法，推荐使用安装到本地项目，可以防止不同版本项目因依赖不同版本的Webpack而造成的冲突问题。
安装完成后，会在配置项package.json文件中出现webpack配置，上图：
3.使用Webpack
运行构建前，先要将最基础的Javascript和html建立好。
3.1、index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>
3.2、show.js
var show = (content) => {
document.getElementById("app").innerText = "Hello，" + content
}
//通过CommonJS规范导出函数
module.exports = show;
3.3、main.js
//通过CommonJS规范导入show函数
const show = require("./show.js");
//执行show函数
show("Webpack");
3.4、webpack.config.js
const path = require("path");
module.exports = {
//__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
//入口文件的位置
entry: './main.js',
output: {
//打包后的文件名称
filename: 'bundle.js',
//打包后的文件存放位置
path: path.resolve(__dirname, './dist'),
//`path.resolve()` 方法会把一个路径或路径片段的序列解析为一个绝对路径。
}
}
此时，目录如下：
|-- index.html
|-- show.js
|-- main.js
|-- package.json
|-- webpack.config.js
文件创建完成后，在项目根目录运行webpack命令运行Webpack构建，这时目录下多出一个dist目录，里面有个bundle.js文件。这时用浏览器打开index.html网页，会看到Hello，Webpack。说明我们构建成功~
4.使用Loader
Loader是web pack中核心的功能。通过不同的loader，webpack通过调用外部的脚本或工具可以对各种各样格式的文件进行处理转化为JS文件。
4.1、json-loader、css-style
新建一个data.json文件：
{
"data":"Webpack !!!"
}
新建一个main.css文件：
body{
background-color: #000000;
color: #ffffff;
text-align: center;
font-size: 20px;
}
改造main.js文件，将输入的内容改为从json文件中获取：
//通过CommonJS规范导入css模块
require("./main.css");
//通过CommonJS规范导入json模块
const json = require("./data.json");
//通过CommonJS规范导入show函数
const show = require("./show.js");
//执行show函数
show(json.data);
改造webpack.config.js文件：
const path = require("path");
module.exports = {
//__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
//入口文件的位置
entry: './main.js',
output: {
//打包后的文件名称
filename: 'bundle.js',
//打包后的文件存放位置
path: path.resolve(__dirname, './dist'),
//`path.resolve()` 方法会把一个路径或路径片段的序列解析为一个绝对路径。
},
module: {
rules: [
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
minimize:true,//高速Loader要开启Css压缩
}
}
],
},
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.json$/,
use: ['son-loader'],
}
]
}
};
此时，目录如下：
|-- index.html
|-- show.js
|-- main.js
|-- main.css
|-- data.json
|-- package.json
|-- webpack.config.js
在重新执行Webpack构建前，先安装新引入的Loader：
npm i -D json-loader style-loader css-loader
安装完成后重新执行构建，看效果吧！~~~
5.使用Plugin
Plugin是用来扩展Webpack功能的，通过在构建流程里注入钩子实现，它为Webpack带来很大的灵活性。
5.1、html-webpack-plugin
改造webpack.config.js文件：
const path = require("path");
const webpack = require('web pack')
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
//入口文件的位置
entry: {
main: './main.js',
},
output: {
//打包后的文件名称
filename: 'bundle.js',
//打包后的文件存放位置
path: path.resolve(__dirname, './dist'),
//`path.resolve()` 方法会把一个路径或路径片段的序列解析为一个绝对路径。
},
module: {
rules: [
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
minimize:true,//高速Loader要开启Css压缩
}
}
],
},
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.json$/,
use: ['son-loader'],;
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new htmlWebpackPlugin({
/*当指定了chunks属性，webpack会按照这个属性定义的数组，
将数组中所有片段完成打包，并用script标签将打包的js插入到生成的页面中，
没有在数组中的片段，则不插入页面,数组定义为”entry“定义的数组名称！*/
chunks:['main'],
filename:'index.html',//生成的文件名称
template:'./index.tmpl.html', //html模板路径
title:'webpack is good',
})
],
};
新建index.tmpl.html文件：
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
</body>
</html>
在重新执行Webpack构建前，先安装新引入的Loader：
npm i -D html-webpack-plugin
安装完成后重新执行构建，看效果吧！~~~
.dist/index.html文件代码：
<html>
<head>
<meta charset="UTF-8">
<title>webpack is good</title>
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script type="text/javascript" src="bundle.js"></script></body>
</html>
6.使用DevServer
先安装新引入的Loader：
npm i -D webpack-dev-server
改造webpack.config.js文件，加入devServer配置：
const path = require("path");
const webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
//入口文件的位置
entry: {
main: './main.js',
},
output: {
//打包后的文件名称
filename: 'bundle.js',
//打包后的文件存放位置
path: path.resolve(__dirname, './dist'),
//`path.resolve()` 方法会把一个路径或路径片段的序列解析为一个绝对路径。
},
module: {
rules: [
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
minimize:true,//高速Loader要开启Css压缩
}
}
],
},
{
//用正则表达式匹配要用该Loader转换的文件
test: /\.json$/,
use: ['json-loader'],
}
]
},
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new htmlWebpackPlugin({
/*当指定了chunks属性，webpack会按照这个属性定义的数组，
将数组中所有片段完成打包，并用script标签将打包的js插入到生成的页面中，
没有在数组中的片段，则不插入页面,数组定义为”entry“定义的数组名称！*/
chunks:['main'],
filename:'index.html',//生成的文件名称
template:'./index.tmpl.html', //html模板路径
title:'webpack is good',
})
],
devServer:{
contentBase:'./dist',//本地服务器加载的页面所在的目录
inline:true,//设置实时刷新
}
};
修改package.json文件，修改启动项"dev"：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"dev": "webpack-dev-server --hot --inline"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"style-loader": "^0.20.2",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
在控制台输入，启动Webpack服务：
npm run dev
这时，修改main.js、main.css、show.js中任意文件，保存后我们会发现浏览器会自动刷新，运行处修改后的效果。
