webpack: webpack,webpack-cli,webpack-dev-server
style: style-loader,css-loader,less-loder等,前两个必须
image: html-loader
other: file-loader
等
下面是示例的package.js,可以直接通过 npm install 命令进行使用
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {},
"dependencies": {
"@babel/core": "^7.8.4",
"@babel/polyfill": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"add-asset-html-webpack-plugin": "^3.1.3",
"babel": "^6.23.0",
"babel-loader": "^8.0.6",
"core-js": "^3.6.4",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-import": "^2.20.1",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^1.1.3",
"terser-webpack-plugin": "^2.3.5",
"thread-loader": "^2.1.3",
"url-loader": "^3.0.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
}
}
import '../media/iconfont.css'
import '../css/index.less'
import '../css/style.css'
webpack.config.js的文件的设置主要分为以下五步:
1、入口(entry)
2、输出(output)
3、模块包设置(module)
4、插件(plugins)
5、打包模式(mode)
// webpack配置文件
// 所有的构建工具都是基于nodejs平台运行的。模块化默认采用commonjs
const path = require('path'); //导入path模块
const HtmlWebpackPlugin = require("html-webpack-plugin") //引入插件,用于直接生成html文件
module.exports = {
// webpack配置
//1、 入口
entry:'./src/index.js',
//2、输出
output:{
// 输出文件名
filename:'built.js',
// 输出路径
path:path.resolve(__dirname,'build')
},
//3、 loader的配置 使用方式 :先下载后使用
module:{
// 设置配置规则
rules:[
// 配置处理样式文件loader
{
test:/\.(css|less)$/,//匹配哪些文件
// 使用的处理文件的loader,执行顺序从下到上,从右到左进行解析
use:[
// 配置处理样式文件需要的loader
'style-loader',
'css-loader',
'less-loader'
]
},
// 配置处理图片文件loader
{
test:/\.(jpg|png|gif|jpeg)$/, //正则匹配图片
loader:'url-loader', //处理图片的loader
options:{
limit:8*1024,// 图标小于8kb,就会被base64进行处理
esModle:false,//关闭url-loader的es6模块化,使用commonjs解析
name:'[hash:10].[ext]' //给图片重命名,[hash:10]表示重命名hash的长度,.[ext]表示使用图片的默认后缀名
}
},
// 配置其他文件处理loader
{
exclude:/\.(css|html|js|less|jpg|png|gif|jpeg)$/, //排除这样的后缀名的文件
loader:'file-loader', //使用的loader
options:{
name:'[hash:10].[ext]',
}
}
]
},
//4、 插件配置 使用方式:先下载然后引用最后使用
plugins:[
// 插件配置的信息
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
//5、 模式
mode:'development' ,//配置为开发环境
// mode:"production" //配置为生产环境
// 开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)
// 特点:只会在内存中编译打包,不会有任何输出
devServer:{
contentBase:path.resolve(__dirname,'build'),//项目构建后的路径
compress:true, //启动gzip压缩
port:4000, //服务器的端口号
open:true //自动打开服务器
}
}
注:上面的css和图片以及html文件比较简单,可以自己作为练习进行添加,这里不做赘述
npx webpack-dev-server
打包JS命令分为两项,mode后面跟的参数不同
webpack 要打包的JS或JSON文件 -o 生成的文件名 --mode=打包方式(production / development)
//开发环境:
webpack ./src/index.js -o ./build/built.js --mode=development
//生产环境:
webpack ./src/index.js -o ./build/built.js --mode=production