webpack是一个打包器。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。
一、搭建环境以及配置
1、安装
全局安装webpack
sudo npm install webpack webpack-cli webpack-dev-server -g
2、创建文件夹
先创建webpack_demo
mkdir webpack_demo
再在文件夹webpack_demo下创建src dist config
mkdir src dist config
3、初始化一个空的本地仓库(如果没有可以不用)
方便后期将代码传到github上
git init .
4、初始化package.json文件
npm init -y
5、给dist和src分别创建文件index.html和index.js(这步可以步操作,只为为了说明一下下面第六步测试,之后删除)
以上基本框架就已经有了
6、测试一下
开发环境打包
webpack --mode=development
生产环境打包
webpack --mode=production
开发环境的包会比生产环境的包大,因为生产环境需要什么就打什么包,不用的不会打包进去。(webpack独有的)
7、在config下创建webpack.dev.js
touch config/webpack.dev.js
8、设置入口出口以及开发环境
const path =require('path')
module.exprots = {
entry: {//入口 有可以并且有多个
main: './src/main.js' //入口文件 如果是单个入口
// main:[ './src/main.js' , './src/main1.js' ] 如果是多入口文件
},
mode: '', //打包环境:开发环境和生产环境
output: {//出口 有且只有一个
filename:'[name]-bundle.js' , //出口文件
path:path.resolve(__dirname,'../dist') //文件路径
}
}
此时执行 webpack --config=config/webpack.dev.js会报错,因为没有设置打包环境,打包环境必须要有一个。
const path =require('path')
module.exports = {
entry: {//入口 有可以并且有多个
main: ['./src/main.js'] //入口文件 如果是单个入口
// main:[ './src/main.js' , './src/main1.js' ] 如果是多入口文件
},
mode: 'development', //打包环境:开发环境和生产环境
output: {//出口 有且只有一个
filename:'[name]-bundle.js' , //出口文件
path:path.resolve(__dirname,'../dist') //文件路径
}
}
此时打包成功
在dist文件下生成一个main-bundel.js文件
测试启动程序
在dist的index.html下增加代码测试,main.js中加个alert弹窗
webpack-dev-server --config=config/webpack.dev.js
测试结果:页面如下
此时点击dist会出现
9、配置本地服务器
//配置本地服务器
devServer:{
contentBase:'dist', //到dist文件下启动
}
此时启动就可以正常访问了
二、加载css以及配置pack.json
1、css样式加载
src下新建样式
此时会报错,要安装css-loader和style-loder(因为webpack只认识js其他语法都无法识别,如果不引入这两个样式加载器,就会报错 )
npm install style-loader css-loader
然后在webpack的module里面配置这两个loader
module:{ //module里面配置加载器
rules:[{
test: /\.css$/, //加载css
use:[
{ loader:'style-loader'},
{loader:'css-loader'}
]
},]
}
重启项目
此时结果
2、配置pack.json
修改scripts,设置启动和打包命令
"scripts": {
"start": "webpack-dev-server --config=config/webpack.dev.js",
"bulid":"webpack --config=config/webpack.dev.js"
},
此时启动项目,启动命令就可以直接用
npm start
打包命令用
npm bulid
三、配置html和image
1、html
在src下新建一个html文件,直接启动仍然会报错。与之前加载css原理一样,需要先加载loader。原因是webpack无法识别html。
需要先安装以下几个关于加载html的loader
npm install html-loader extract-loader file-loader
webpack中配置
//配置html的loader
{
test: /\.html$/,
use: [
{
loader: 'file-loader', //3、给当前加载文件起名
options: {
name: '[name].html' //此时就是index.html
}
},
{ loader: 'extract-loader', }, //2、将index.html与bundle.js区分(分离)
{ loader: 'html-loader', } //顺序1、找到html文件
]
},
2、配置image loader
//配置image的loader
{
test: /\.(jpg|png)$/,
use: [
{
loader: 'file-loader', //3、给当前加载文件起名
options: {
name: 'image/[name].[ext]'
// name: 'image/[name]-[hash:8].[ext]' //名称后面加8为hash值
}
},
]
},
四、babel转换
安装插件
npm install babel-core
npm install babel-plugin-transform-es2015-arrow-functions
根目录下新建.babelrc文件,添加插件信息
{
“plugins”:[
“transform-es2015-arrow-functions”
]
}
全局安装插件
sudo npm install -g babel-cli
安装 babel-loader
npm install babel-loader
官网:https://webpack.docschina.org/concepts/