1.进入命令行,创建文件夹mkdir webpackdemo,进入文件夹cd webpackdemo
2.对项目进行初始化(npm init),目的是为了生成package.json文件。ps:一路回车即可,内容后面也可修改
3.安装webpack之前查看node是否安装 node -v,webpack安装分为全局安装(npm install webpack -g)和局部安装(npm install webpack --save-dev),安装完毕可以查看一下(webpack -v)ps:官方推荐局部安装,毕竟不是所有项目都用到webpack;--save是指要保存到package.json中,-dev是指开发环境使用这个包生产环境不用
4.在文件夹中创建dist文件夹和src文件夹。src文件夹存放所编写的javascript代码,用于开发环境;dist文件夹存放webpack打包好的文件,用于生产环境。
5.在dist文件夹下创建index.html文件,如下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
bundle.js文件此时还没有,是webpack打包后生成的文件
6.在src文件夹下创建entry.js文件即入口文件。内容如下:
document.getElementById("title").innerHTML = "Hello World"
第一次Webpack打包(webpack src/entry.js -o dist/bundle.js),打包成功之后dist目录下会出现bundle.js文件,此时live-server打开网页即可看到dist内出现Hello World
入口出口文件配置:在项目文件夹根目录创建webpack.config.js,内容如下:
const path = require('path');
module.exports={
//入口文件的配置项
entry: {
entry: './src/entry.js'
},
//出口文件的配置项
output:{
//获取了项目的绝对路径,node写法
path: path.resolve(__dirname, 'dist'),
//打包后的文件名称,也可写成[name].js即打包后生成同名文件
filename: 'bundle.js'},
//模块:例如解读CSS,图片如何转换,压缩
module:{},
//插件,用于生产模版和各项功能
plugins:[],
//配置webpack开发服务功能
devServer:{}
}
配置服务和热更新:下载webpack-dev-server(npm install webpack-dev-server --save-dev),完成后配置devServer.
devServer:{
//设置基本目录结构,配置服务器基本运行路径,用于找到程序打包地址
contentBase:path.resolve(__dirname,'dist'),
//服务器的IP地址,可以使用IP也可以使用localhost
host:'localhost',
//服务端压缩是否开启
compress:true,
//配置服务端口号
port:8081
}
在package.json中配置scripts选项,内容如下:
"scripts": {
"server":"webpack-dev-server"
},
此时已配置完成,打开服务器(npm run server)在浏览器地址栏输入http://localhost:8081即可。
css文件打包 (Webpack在生产环境中一个重要的作用就是减少http请求数,即把多个文件打包到一个js里)
webpack通过不同的Loader对不同的文件格式进行特定处理。例:将SASS文件的写法转换成CSS,而不再用其他转换工具;将ES6/ES7的代码装换成大多数浏览器兼容的JavaScript代码。所有的Loaders都需要npm单独安装并且在webpack.config.js内配置。配置型如下:
- test:用于匹配处理文件的扩展名的表达式,这个选项是必须进行配置的;
- use:loader名称,就是你要使用模块的名称,这个选项也必须进行配置,否则报错;
- include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
- query:为loaders提供额外的设置选项(可选)。
在src内创建index.css文件,内容如下:
body{
background-color: red;
color: white;
}
创建完成后要引入到入口文件中才能打包,在src/entry.js文件中加入:
import css from './css/index.css'
引入后需要使用loader解析css文件,这里需要下载两个loader,即style-loader(npm install style-loader --save-dev)和css-loader(npm install css-loader --save-dev)。
下载安装好后需要在webpack.config.js的module属性中配置:
module:{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},