webpack打包工具
基本用法都在下面
const path=require("path")//这是用来输出path.resovle
const HtmlWebpackPlugin=require("html-webpack-plugin")//用于把HTML页面放入内存
const minicss=require("mini-css-extract-plugin")//webpack4.0以后的打包css文件
const OptimizeCssAssetsWebpackPlugin=require("optimize-css-assets-webpack-plugin")//压缩css文件
const WorkboxWebpackPlugin=require("workbox-webpack-plugin")//pwa的缓存使用
//cnpm install optimize-css-assets-webpack-plugin --save-dev
//cnpm install workbox-webpack-plugin --save-dev
const htmlplugin=new HtmlWebpackPlugin({
//需要在预编译器与插件里面配置
template:path.join(__dirname,'./src/index.html'),//源头文件
filename:"index.html"//生成首页的文件名称
})
const css=new minicss({
//输出css独立文件
filename:"./css/[name].css",
chunkFilename:"[name].css"//或者id
})
module.exports={
//webpack基于node构建的
mode:"production",//mode entry output module:{rule:[]} plugin 还有一些可选的resovle devServe
// entry: {
// index: './src/index.js',
// main: './src/main.js'
// },
// output: {
// filename: '[name].js',
// path: path.resolve(__dirname, 'dist')
// },
entry: {
index: './src/index.js'
},
output: {
filename: 'js/[name].[contenthash].js',//hash chunkhash content通过热加载输出script文件挂载在目录与index.HTML一样
path: path.resolve(__dirname, 'dist')//输出采用resovle的绝对路径 而dirname的相对用于服务器上面
},
//production 提供了约定大于配置 约定打包文件是src/index ->dist/main
plugins:[
htmlplugin,//把HTML页面输出指定文件
css,//css插件
new OptimizeCssAssetsWebpackPlugin(),
new WorkboxWebpackPlugin.GenerateSW({
//pwa缓存的设置
clientsClaim:true,//删除之前旧的缓存
skipWaiting:true//加快加载
})
],
module: {
//所以第三方模块的配置规则
rules: [
{
test:/\.js|\jsx$/,
use:[{
loader:"babel-loader",
options:{
cacheDirectory:true,
parsets:["@babel/preset-env",{
targets:{
"ie": "11",
"chorme":"87"
},
"corejs": "3", // 新写法兼容老浏览 器
"useBuiltIns":"usage"
}
}
}],//缓存
exclude:/node_modules/},
//一个属性use:"babel-loader"两个是数组
// { test:/\.css/,use:['style-loader','css-loader']},
{
test:/\.css$/,use:[{
loader:minicss.loader,options:{
//css插件在预编译配置
}},"css-loader"]},
// { test:/\.scss/,use:['style-loader', {loader: "css-loader",
// options: {
// modules: {
// localIdentName: "[path][name]-[local]-[hash:5]"
// }//import css from '路径' console.log(css)会生成模块
// //这是react的处理办法 vue就是style里面写scoped
// //支持id与class 控制台输出的模块是健对值形式
// }//css scss less一样的配置模块化
// }]},
{
test:/\.(jpg|PNG|png|jpeg)/,use:[{
loader:"url-loader",options:{
outputPath:"images/",
limit:50//单位是B 大于这个会打包出来
}}]},
{
// 引用jQuery暴露$符号
test: require.resolve('jquery'),
use: 'expose-loader?$'
}
// {exclude:/\.(css|js|html|less)$/,loader:"file-loader",options:{name:"[hash:8].[ext]"}}//可以include包含 exclude排除
// { test:/\.less/,use:['style-loader','css-loader']}
]
},
resolve: {
extensions: [".js", ".jsx", ".json"],//在react配置的时候一定要加 不然不认识 vue就随便
alias:{
//路径别名
$router:path.resolve(__dirname,'src/router')
}
},
externals: {
// script导入文件 不打包
jquery: "jQuery"
},
devtool:"hidden-source-map",//inline把js打包在一个文件里面 hidden分离出来 eval也是分离
optimization:{
//代码分割 下面vendors就是分割代码之后(把相同的库或者文件都提出来打包) 你可能在想css文件去哪了 你注销代码分割 你可以看见css文件夹
splitChunks:{
chunks:"all"
}
}
}
json配置
{
"name": "biiantd",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --port 4000 --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"antd": "^4.3.3",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"react-router-dom": "^5.2.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
}
}