一、(目录最好不要用中文名,不然容出错)
1,创建一个空白的目录 并运行npm init -y 命令 初始化包管理配置文件 package.json
2,新建src源码目录
3,新建src -> index.html 首页
4,初始化首页基本的结构
5,运行npm install jquery -S 命令,安装JQuery
6,通过模块化的形式,实现列表隔行变色的效果
二、配置webpack
1,运行npm install webpack webpack-cli -D 命令,安装webpack相关的包
2,在项目根目录中,创建名为webpack.config.js 的webpack配置文件
3,在webpack的配置文件中,初始化如下基本配置: module.exprots={ mode:'development' //mode用来指定构建模式 development开发模式 production正式模式 }
4,在package.json 配置文件中的scripts节点下,薪资dev脚本如下: "scripts":{ "dev":"webpack" //script 节点的脚本,可以通过npm run 执行 }
5,在终端中运行 npm run dev 命令,启动webpack 经行项目打包
三、手动配置webpack的入口与出口
webpack的4.x 版本默认约定:
·打包的入口文件为 src -> index.js
·打包的输入文件为 dist -> main.js
如果要修改打包的入口与出口,可以在webpack.config.js中新增如下配置信息
const path=require('path') //导入node.js 中专门操纵路径的模块
module.exprots={
entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
output:{
path:path.join(__dirname,'./dist'), //输出文件的存放路径
filename:'bundle.js' //输出文件的名称
}
}
四,配置webpack自动打包功能
1,运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具
2,修改package.json -> scripts 中的dev命令如下:
"scripts":{ "dev":"webpack-dev-server" //script 节点下的脚本,可以通过 npm run 执行 }
3,将 src -> index.html 中,script 脚本的引用路径,修改为 "/bundle.js"
4,修改配置文件 webpack.config.js,告知 dev server,从什么位置查找文件:
devServer: { static: './', },
5,运行 npm run dev 命令,重新打包
6.在浏览器中访问 http://localhost:8080/ 地址,查看自动打包效果 注意: webpack-dev-server 会启动一个实时打包的http服务器 webpack-dev-server 打包生成的输出文件,默认放到了项目的根目录中,而是虚拟的、看不到的
五、配置html-webpack-plugin 生成预览页面
1,运行npm install html-webpack-plugin -D 命令,安装生成预览页面的插件
2,修改webpack.config.js 文件头部区域,添加如下配置
//导入生成预览页面的插件,得到一个构造函数 const HtmlWebpackPlugin=require('html-webpack-plugin') const htmlPlugin=new HtmlWebpackPlugin({//创建插件的实例对象 template:'./src/index.html',//指定要用的模板文件 filename:'index.html'//指定生成的文件名称 ,该文件存在于内存中,在目录中不显示 })
3,修改webpack.config.js 文件中向外暴漏的配置对象,增加如下配置节点
module.exprots={ plugins:[htmlPlugin] //plugin数组是webpack打包期间会使用到的一些插件列表 }
六、配置自动打包相关的参数
//package.json中的配置
//--open打包完成后自动打开浏览器页面
//--host 配置IP地址
//--port 配置端口
"scripts":{
"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}
七、通过loader打包非hs模块
1, 在实际开发中、webpack默认只能打包处理.js后缀名结尾的模块,其他非.js后缀名结尾的模块、webpack默认处理不了,需要调用loder加载器才可以正常打包,否则会报错
2, loader加载器可以协助webpack打包处理待定的文件模块,比如
less-loader 可以打包处理.less 相关的文件
sass-loader 可以打包处理.sass 相关的文件
url-loader 可以打包处理css中与url路径相关的文件
八、打包css文件
1,运行npm i style-loader css-loader -D 命令,安装处理css文件的loader
2,webpack.config.js的module->rules数组中,添加loader规则如下
//所有第三方文件模块的匹配规则
module:{
rules:[//存放所有loader相关的内容
{test:/\.css$/,use:['style-loader','css-loader']}
]
},
其中,test表示匹配的文件类型,use表示对应要调用的loader 注意:use数组中指定的loader顺序是固定的 多个loader的调用顺序是:从后往前调用
九,打包处理less文件
1,运行npm i less-loader less -D 命令
2,webpack.config.js 的module->rules 数组中,添加loader规则如下
module:{
rules:[//存放所有loader相关的内容
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
},
十、打包处理scss文件
1,运行npm i scss-loader node-sass -D 命令
2,webpack.config.js 的module->rules 数组中,添加loader规则如下
module:{
rules:[//存放所有loader相关的内容
{test:/\.scss$/,use:['style-loader','css-loader','scss-loader']}
]
},
十一、配置postCSS自动添加兼容前缀
1,运行npm i postcss-loader autoprefixer -D 命令
2,在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置:
const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
module.exports={
plugins:[autoprefixer]//挂载插件
}
3,在webpack.config.js的module->rules数组中,修改css的loader规则如下:
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
十一、打包样式表中的图片和文字文件
1,运行npm i url-loder file-loder -D 命令
2,在webpack.config.js 的module->rules 数组中,添加loader规则如下
module:{
rules:[
{
test:/\/jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use:'url-loader?limit=16840'
}
]
}
其中?之后的是loader的参数项 limit用来指定图片的大小,单位是字节(byte),只有小于limit大小的图片,才会被转为base64图片
此处build中不用加-p