目前webpack已经到了3.X版本，为了方便通过最新版本打包整个前端应用，现在开始对webpack操作进行简单介绍。
一、webpack安装
在安装webpack之前需要注意，webpack是通过npm进行安装的，而npm存在于node.js中，类似于redhat系统的yum，都是包管理工具，只不过npm是前端框架安装管理工具而已，在安装npm需要安装node.js
1、登录node.js官网：
2、在官网选择TLS稳定版本进行安装，如果是mac系统可以通过自身的brew工具，直接进行安装（brew install nodejs）
3、在安装完毕后，直接输入nodejs -v和npm -v如果有输出值，说明安装完毕
3.1、npm安装完毕后，自己创建一个文件夹my-web，今日该文件夹后执行 npm init --yes（或者-y）初始化一个package.json的文件，这个文件里会包含如下信息
{
"name": "vue-loader-demo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {}, #如果是--save会出现在这个{}内
"devDependencies": { #如果是--save-dev会出现这个{}内
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-runtime": "^6.26.0",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0",
"vue-hot-reload-api": "^2.2.3",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.5.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.3"
}
}
4、安装完毕后，由于npm在国外，所以可以通过安装国内的淘宝cnpm加快安装速度
找到安装步骤里的安装执行命令，在终端执行：
npm install -g cnpm --registry=https://registry.npm.taobao.org
5、 安装完毕后，webpack可以通过cnpm命令进行安装
6、执行cnpm install webpack --save（--save表示永久存在，在生产环境需要，--save-dev表示在开发环境中存在）
执行完毕后，webpack安装完毕
二、webpack文件说明
webpack文件为webpack.config.js文件，格式如下：
const path = require('path') //定义path
module.exports={
entry:{
one:'./src/one.js' //入口文件
},
output:{
path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令
filename: 'output.js' //webpack执行后的出口文件
},
module:{
},
plugins:[],
devServer:{},
}
在3.X时候可以定义多个入口与出口文件
const path = require('path') //定义path
module.exports={
entry:{
one:'./src/one.js', //入口文件
two:'./src/two.js'
},
output:{
path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令
filename: '[name].js' //webpack执行后的出口文件,【name】表示和每一个对应入口文件
},
module:{
},
plugins:[],
devServer:{},
}
三、webpack-dev-server
3.X开始webpack-dev-server无需单独下载，只需要下载webpack后就会跟着自动下载，同时在webpack.config.js文件中填写配置，还可以实现热更新
const path = require('path') //定义path
module.exports={
entry:{
one:'./src/one.js', //入口文件
two:'./src/two.js'
},
output:{
path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令
filename: '[name].js', //webpack执行后的出口文件,【name】表示和每一个对应入口文件
publicPath: '/temp/' //把临时修改都更新到temp目录下，这个目录是不建立的，是虚拟在内存中的目录
},
module:{
},
devServer:{//配置dev-server
contentBase: path.resolve(__dirname, './'),
host: '192.168.2.104',
compress:true,//HTML5压缩
port:9000
},
}
如果感觉在终端敲webpack-dev-server很麻烦，可以在package.json文件中将它写在scripts下，然后执行npm run server就直接运行了
{
"name": "webpack3learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"server": "webpack-dev-server"//在这里增加这个命令，可以简化敲命令的长度
},
"keywords": [],
"author": "",
"license": "ISC"
}
四、模块
1、css打包
使用css打包功能必须使用css.loader和style.loader这两个配合使用，首先登录npmjs的官网找到css-loader：
https://www.npmjs.com/搜索css-loader
找到相关命令，安装：
cnpm install css-loader style-loader --save-dev
安装完毕后，查看模块填写参数，webpack.config.js中：
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
const path = require('path') //定义path
module.exports = {
entry: {
one: './src/one.js', //入口文件
two: './src/two.js'
},
output: {
path: path.resolve(__dirname, 'dist'), //这个是node.js中引入绝对路径的命令
filename: '[name].js', //webpack执行后的出口文件,【name】表示和每一个对应入口文件
publicPath: '/temp/' //把临时修改都更新到temp目录下，这个目录是不建立的，是虚拟在内存中的目录
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
devServer: {//配置dev-server
contentBase: path.resolve(__dirname, './'),
host: '192.168.2.104',
compress: true,//HTML5压缩
port: 9000
},
}
在src目录下添加one.css文件
body{
background:#666;
color:#fff;
}