一.Webpack安装:
一、本地安装
1.初始化项目:
npm init -y
2.安装webpack及依赖:
npm install webpack webpack-cli -D
3.配置webpack.json里面的scripts:
"scripts": {
"build": "webpack index.js -o ./dist/bundle.js"
},
//build自定义别名;index.js是入口文件;bundle.js打包完成的文件
4.打包命令:
npm run build
5.为了防止配置文件混乱,我们将配置文件拎出来单独新建一个webpack.config.js文件
const path = require("path")
module.exports = {
// 入口文件
entry: path.join(__dirname, "src", "index.js"),
output: {
// 出口的目录
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
// 打包的模式
// development: 开发,代码不压缩
// production: 生产,代码压缩
mode: 'production',
}
6.打包命令:
npm run webpack
以上js打包完成
二、css打包:
1.现在入口文件index.js中引入.css文件
const $ = require('./css/index.css');
2.安装css-loader
npm install style-loader css-loader -D
3.配置loader
// 配置loader
module: {
// 配置css-loader,解析css文件
rules: [
{
// 正则,匹配所有的css文件
// css-loader的作用: 根据关键字: require/import 找到对应的css文件进行解析
// style-loader的作用:把解析的css代码通过style标签插入到DOM中
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
]
}
}
4.安装less:
npm install -D less-loader less
const path = require("path")
module.exports = {
// 入口文件
entry: path.join(__dirname, "src", "index.js"),
output: {
// 出口的目录
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
// 打包的模式
// development: 开发,代码不压缩
// production: 生产,代码压缩
mode: 'production',
//配置loader
module:{
//配置css-loader
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
5.图片处理:
npm install file-loader -D
//css样式
li{
line-height: 50px;
width: 300px;
height: 200px;
background: url(../images/244.png);
}
//对css里图片进行处理配置
const path = require("path")
module.exports = {
// 入口文件
entry: path.join(__dirname, "src", "index.js"),
output: {
// 出口的目录
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
// 打包的模式
// development: 开发,代码不压缩
// production: 生产,代码压缩
mode: 'production',
//配置loader
module:{
//配置css-loader
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
//图片打包处理
/*{
test:/\.(gif|jpg|png|jpeg)$/,
use:['file-loader']
}*/
{
test:/\.(gif|jpg|png|jpeg)$/,
use:[{
loader:'url-loader',
options:{
limit:8912
}
}]
},
{
//字体图标配置
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024 * 10
}
}]
}
}
注:file-loader和url-loader都可以打包图片,url-loader
类似于 file-loader
,但如果文件小于字节限制,则可以返回DataURL。这里如果图片小于8K,解析成base64编码,如果图片大于8k,就交给file-loader,生成一张独立的图片(url-loader限制图片大小的原因是如果图片太大,会导致生成的js太大,浪费资源),所以当用url-loader时,要同时安装file-loader,不然就会报错
6.es6高级语法转换低版本语法:
npm install babel-loader babel-core babel-preset-env -D
7.webpack插件:
npm install -D html-webpack-plugin
使用
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template:path.join(__dirname, "src", "index.html")
})
]
}
webpack-dev-server的使用;(注:在以后开发就可以随着代码的改动,可以实时更新页面效果)
npm install -D webpack-dev-server
devServer: {
contentBase: path.join(__dirname, 'dist'),
open: true,//默认打开浏览器
port: 8080 //默认端口
}
热更新:(注:好处是只打包你修改的文件)
const webpack = require('webpack')
plugins: [
new HtmlWebpackPlugin({
template:path.join(__dirname, "src", "index.html")
}),
new webpack.HotModuleReplacementPlugin({})//热更新
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
open: true,
hot:true, //热更新,这个属性依赖一个HotModuleReplacementPlugin的插件,需要安装即可
port: 8080
}