1. webpack快速入门
1.1. 开始
初始化一个项目,生成一个package.json
npm init
创建src文件，作为项目源码文件夹，在src下创建main.js文件作为项目入口文件
创建build文件，在该文件夹下创建config.js作为webpack的配置文件
1.2. 安装
webpack是nodejs的一个模块，因此可以使用npm快速安装
npm install webapck -D
安装webpack-dev-server，为了启动开发服务器
npm install webpack-dev-server -D
安装 babel-core,babel的核心功能
npm install babel-core -D
安装babel-loader@7,webpack的loader插件
npm install babel-loader@7 -D
安装babel-preset-stage-2,安装babel转码规则
npm install babel-preset-stage-2 -D
安装css-loader,可以加载css
npm install css-loader -D
安装style-loader,把css作为style标签插入页面
npm install style-loader -D
安装html-webpack-plugin,可以自动把打包好的文件引入html页面；
npm install html-webpack-plugin -D
大概安装一些我们需要的插件之后，我们大概来配置一些内容来看一看webpack是如何工作的。后边如果需要别的功能还可以继续安装。
1.3. 配置
现在可以在build/config.js中添加一些内容来进行配置了，看下边的配置：
const path = require('path');
const HtmlWebpackPlugin = require('heml-webpack-plugin');//引入插件
module.exports = {
entry:path.join(__dirname,'./src/main.js');//设置打包入口文件
output:{//设置输出
path:path.join(__dirname,'./dist'),//输出路径
filename:'[name].js'//输出文件名
},
module:{//配置各种loader
rules:[//配置loader规则
{ //针对不同类型文件的loader都是一个对象
test:/\.js$/,//一个正则表示对所有的js文件有效
use:['babel-loader']//针对这类文件所使用的loader,表示所有的js文件都会使用babel-loader进行转码
include:[],//包含的目录列表
exclude:[],//不包含的目录列表
},
{
test:/\.css$/,
use:['style-loader','css-loader]
}
]
},
resolve:{//关于模块引入的一些选项
modules:[//设置查找模块的目录
'node_modules'
],
extensions:['.js','.json','.vue','.css'],//默认添加的后缀名
alias:{//起别名
'@':path.join(__dirname,'./src')
}
},
devserver:{//针对开发服务器的一些配置
noInfo:true,//不显示打包信息，但是会显示错误和警告
overlay:{//错误和警告会显示在浏览器的视图上
warnings:true,
errors:true
}
},
plugins:[
new HtmlWebpackPlugin({//使用插件
template:'./index.html'
})
]
}
在项目根目录中创建.babelrc文件，在该文件中书写：
{
"presets":["stage-2"]
}
1.4. 启动
在package.json中的script属性中添加如下命令
"dev":"webpack-dev-server --config ./build/config.js --mode development --open --inline",
"build":"webpack --config ./build/config.js --mode production"
打开命令行，定位到到当前项目根目录下执行
启动开发服务器
npm run dev
打包项目并生成文件dist/main.js
npm run build
