webpack官网
电脑已经安装了git和node
主要四大部分是:
入口(entry)
输出(output)
解析器(loader)
插件(plugins)
1/ npm(包管理工具)全局(-g)安装webpack和webpack-cli(命令行接口)
npm install webpack webpack-cli -g
2/ 初始化当前项目
npm init
在项目文件夹中生成 package.json
3/ 局部安装
npm install webpack webpack-cli -D 或者npm install webpack webpack-cli --save-dev (开发环境)
在项目文件夹中生成 node_modules 和 package-lock.json
(如果把项目发给别人,可以把node_modules删掉发,对方执行“npm install”命令就可以重新下载)
4/ 执行 webpack 命令,打包处理
默认入口路径 src/index.js , 打包输入默认路径 dist/main.js
5/ 配置文件
环境变量 生产环境 production 开发环境 development
(shell语句) 命令 webpack --mode=development (输出文件未压缩)--------可以写到配置文件中
可以根据shell语句和配置文件设置打包方式
在项目中建 webpack.config.js 配置文件(可以配置两套配置文件,执行命令 webpack -config=名字)
配置文件详情请见demo
6/ 监听依赖文件变化 自动打包不能自动刷新
webpack --watch
开启服务器(可以自动刷新)
webpack-dev-server (先下载 npm install webpack-dev-server -D)
操作步骤:配置文件
改成绝对路径
webpack-dev-server --hot 只更新变化的部分
同一入口的多个js文件会打包一起;多个css文件和less文件会打包一起(如果使用插件单独打包的话)
html文件如果用的插件’html-webpack-plugin’打包,而不是引入到入口文件中打包,那html文件中的image就不会打包,解决办法:首先下载html-withimg-loader,其次先引入模块var html = require(‘html-withimg-loader’); 然后在module中配置 {test: /.(htm|html)$/i, use: [‘html-withimg-loader’]},注意,如果有注释掉的图片引入代码也会加载
webpack.config.js文件配置:
//引入nodejs的path模块
var path = require('path');
//分离html插件 需要先下载插件 命令 npm install html-webpack-plugin -D
var HtmlWebpackPlugin = require('html-webpack-plugin');
//压缩js插件 命令 npm install uglifyjs-webpack-plugin -D
var Uglify = require('uglifyjs-webpack-plugin');
//抽离css文件(单独打包) 命令 npm install mini-css-extract-plugin -D
var Minify = require('mini-css-extract-plugin');
//打包html文件中的图片
var html = require('html-withimg-loader');
module.exports = {
//入口文件(可以字符串/数组/对象)
// entry:'./src/main.js',
//可以有多个入口文件,则输出文件也要对应有多个,写法见下面
entry:{
mainBund:'./src/main.js',
// xiaoMainBund:'./src/xiaoMain.js'
},
//输出文件
// output:{
// filename:'bundle.js',
// //根目录下的dist
// path:path.resolve(__dirname, 'dist')
// },
output:{
filename:'[name].js', //这个name是mainBund
//根目录下的dist
path:path.resolve(__dirname, 'dist')
},
//生产环境
mode:'development',
//开启/设置服务器
devServer:{
contentBase:'dist',
port:9999,
},
//loader解析器
module:{
rules:[
// css loader
{
test:/\.css$/,
//需要先下载使用命令 npm install style-loader css-loader -D
//以style的形式解析成行间样式了,解析的时候从后往前解析
// use:['style-loader', 'css-loader']
//单独打包css文件,要用到mini-css-extract-plugin插件
use:[Minify.loader, 'css-loader']
},
//html loader
{
// test:/\.html$/,
// //需要先下载使用命令 npm install file-loader html-loader extract-loader -D
// use:[
// //单独抽离的html文件进行配置
// {
// loader:'file-loader',
// options:{
// name:'index.html'
// }
// },
// //单独抽离html
// {
// loader:'extract-loader'
// },
// //找到html文件
// {
// loader:'html-loader'
// }
// ]
},
//js loader (es6)
{
// test:/\.js$/,
// //需要先下载使用命令 npm install babel-loader -D
// use:['babel-loader']
},
//图片img loader
{
test:/\.(jpg|png)/,
//命令 npm install url-loader -D (url-loader包括file-loader)
use:[
{
loader:'url-loader',
//如果不做处理,会以base64展示图片,做一下规定:如果小于8192则以base64,否则将图片输出到dist文件夹下
options:{
limit:8192,
name:'image/[name].[hash:8].[ext]'
}
}
]
},
//less文件 loader
{
test:/\.less$/,
//需要先下载使用命令 npm install less less-loader css-loader -D
use:[Minify.loader, 'css-loader', 'less-loader']
},
//打包html文件中的图片
{
test: /\.(htm|html)$/i,
use: ['html-withimg-loader']
}
]
},
//plugins插件
plugins:[
new HtmlWebpackPlugin({
//只有在没有引用模板时title才起作用
title:'title',
template:'./src/index.html',
chunks: ['mainBund'], //如果有多个入口文件,用这个属性可以指定入口文件
// inject:false, //不引入js文件
//将生成的html文件压缩
// minify:{
// collapseWhitespace:true
// }
}),
// new Uglify(), // 压缩js插件
new Minify({
filename:'[name]_[contenthash:8].css'
})
]
}
欢迎交流指正!