才学完webpack4.0,webpack出5.0了,脑壳昏昏!!
1.安装node
2.新建一个文件夹,打开cmd,进入该文件夹使用npm来下载基本依赖配置
npm install init -y
得到package.json文件,存放项目名称,各种依赖,插件等版本号
npm install webpack webpack-cli
下载webpack以及脚手架
得到 node_modules 文件,依赖以及插件等都在这里面
手动创建以下文件
index.html:打包需要的模板
main.js:打包的入口
webpack.config.js:webpack核心配置文件
1 //webpack.config.js文件 2 let path = require(‘path‘) //node自带的功能,不需要下载, 3 module.exports = { 4 entry:‘./src/main.js‘, 5 output:{ 6 mode:‘development‘, 7 path:path.resolve(__dirname,‘public‘), 8 filename:‘js/[name][hash:6].js‘ //打包完成的文件在public/js里面 9 } 10 }
entry: 入口文件
output: 出口文件配置
mode: 设置模式,development:开发模式,production:生产模式
path: 打包后文件存放的路径,__dirname为当前文件夹,创建一个public文件来保存打包的文件
filename: 打包后的文件名称,打包在js文件里面
[name]:当前文件名称
[hash:6]: 设置一个哈希值,哈希值的长度为6,哈希值可以防止文件名冲突
接下来我们可以使用npx webpack来打包,这时你会看到一个public文件,打包的内容都在里面,不过只能看到js文件,因为html文件还没配置
npm install html-webpack-plugin -D //下载html-webpack-plugin插件来处理html文件
1 let HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 2 3 module.exports = { 4 plugins:[ 5 new HtmlWebpackPlugin({ 6 template:‘index.html‘,//使用的模板 7 filename:‘index.html‘,//打包出来的文件名称 8 minify:{//优化操作 9 removeAttributeQuotes:true, //去掉双引号 10 collapseWhitespace:true //去掉空格 11 }, 12 }) 13 ] 14 }
plugins:插件集,webpack的插件都放在里面,通过new来使用
css处理:
npm install css-loader style-loader less-loader -D
module.exports = { module:{ rules:[ { test:/\.css$/, //正则表达式来匹配所有.css文件 use:[‘style-loader‘,‘css-loader‘] },{ test:/\.less$/, //匹配所有.less文件 use:[‘style-loader‘,‘css-loader‘,‘less-loader‘] } ] } }
module:模块,里面存放的都是loader的配置
loader:能将所有类型的文件转化为webpack能够处理的模块,webpack只能处理js的模块,loader默认是从右致左,从下致上执行的
rules:匹配规则
test:正则表达式进行匹配相应的文件
use:设置转化是具体使用的loader
style-loader:将模块的导出作为样式,使用style标签导入到DOM中
css-loader:解析css文件,使用import进行加载,并且返回css样式
less-loader:将less文件转化为webpack可识别的css
第二种css配置方法以及添加css前缀
npm install mini-css-extract-plugin 将所有的css提取到单独的文件中,为每个包含css的js文件创建一个css文件
npm install postcss-loader autoprefixer 给css添加兼容的前缀
//webpack.config.js文件 let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘) module.exports = { module:{ rules:[ { test:/\.css$/, //正则表达式来匹配所有.css文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘ ] },{ test:/\.less$/, //匹配所有.less文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘, ‘less-loader‘ ] } ] }, plugins:[ new MiniCssExtractPlugin({ filename:‘./css/main[hash].css‘ }) ] }//filename:css文件打包的目录以及文件名称//需要的文件都在main.js文件中使用require去引用//也可以import引入css//index.jsrequier(‘./css/***.css‘)require(‘./css/***.less‘)
//在与webpack.config.js文件平级的目录中创建一个postcss.config.js文件用来引入autoprefixer,webpack自动会引用这个文件,我们不需要去引用 module.exports = { plugins:[require(‘autoprefixer‘)] }
解决图片引用问题:
npm install url-loader file-loader url-loader依赖于file-loader,所以我们需要安装file-loader
url-loader 解决图片引入的路径问题以及可以将指定大小范围内的图片解析成base64码
file-loader 将文件发送到输出文件夹,并返回(相对)URL
//在module -> rules里面添加 module.exports = { module:{ rules:[ { test:/\.(png|gif|jpg)/, use:{ loader:‘url-loader‘, options:{ limit:8919, name:‘img/[name][hash:6].[ext]‘ } } } ] }, plugins:[ new MiniCssExtractPlugin({ filename:‘./css/main[hash].css‘ }) ] } //在webpack.config.js同级的目录下创建一个postcss.config.js文件用来引入autoprefixer,webpack自动会引用这个文件,我们不需要去引用 module.exports = { plugins:[require(‘autoprefixer‘)] }
options:配置属性
limit:文件小于于8.919kb就转为base64码
name:图片存放的位置以及名称
[ext]:根据文件自动添加后缀
高阶js转低阶:
安装需要的loader以及依赖等
npm install babel-loader @bable/core @babel/preset-env -D
安装支持ES6的class依赖
@babel/plugin-proposal-class-properties
支持es6修饰器
@babel/plugin-proposal-decorators
@babel/plugin-transform-runtime
高级语法转低级必须使用的包,由于上线时需要,所有不用加-D
@babel/runtime
实例上的方法默认不会去解析,需要引用在代码里,不能加-D
@babel/polyfill
module.exports = { plugins:{ rules:[ { test:/\.js$/,//匹配所有js文件 use:{ loader:‘babel-loader‘, //语法转化的loader options:{ //转化的配置 presets:[‘@babel/preset-env‘], //设置预设 plugins:[ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }], "@babel/plugin-transform-runtime" ] } }, include:path.resolve(__dirname,‘src‘),//转化当前文件夹下的src目录 exclude:/node_modules/ //排除不需要转化的目录 } ] } }
dveServer配置服务器配置
npm install webpack-dev-server
//在webpack.config.js文件中添加 module.exports = { devServer:{ port:3000,//端口 progress:true, // 显示压缩进度条 contentBase:"./public",//启动的路径 compress:true,//启动zip压缩 open: true, 运行时自动打开浏览器 hot:true,//启用热更新 inline:true,//页面实时刷新 } } /*在package.json中的scripts属性中添加两项 "build":"webpack --config webpack.config.js", //使用我们的配置文件进行打包 "dev": "webpack-dev-server" //运行项目 如果想运行项目,就在终端中启用 npm run build 打包 npm run dev 运行项目 */
调用打包后,将旧文件删除
npm install clean-webpack-plugin -D
let {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘)////删除多次打包生成不必要的旧文件 plugin:[ new CleanWebpackPlugin() //默认删除output.path里面的文件 ] // watch:true, //监听代码改变,实时打包webpack-dev-server默认开启监听 watchOptions:{ poll:1000, //设置多久检查一次,单位为毫秒 aggregateTimeout:500, //防抖,代码改变500毫秒之后再自动打包 ignored:/node_modules/ //忽略不需要监听的文件 },
附上我的基本配置全部代码:
let path = require(‘path‘)//node自带的 let HtmlWebpackPlugin = require(‘html-webpack-plugin‘) let MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘) let {CleanWebpackPlugin} = require(‘clean-webpack-plugin‘) module.exports = { entry:‘./src/main.js‘,//入口文件 mode:‘development‘, //设置模式,一共有两种development:开发模式,production:生产模式 output:{//打包的出口配置 path:path.resolve(__dirname,‘public‘), //__dirname表示为当前路径,在当前路径下创建一个public文件夹 //打包后的文件名称 filename:‘js/[name][hash:6].js‘ }, devServer:{ port:3000, progress:true, // 显示压缩进度条 contentBase:"./public",//启动的路径 compress:true,//启动zip压缩 open: true, hot:true,//启用热更新 inline:true,//页面实时刷新 }, module:{ rules:[ { test:/\.css$/, //正则表达式来匹配所有.css文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘ ] },{ test:/\.less$/, //匹配所有.less文件 use:[ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘postcss-loader‘, ‘less-loader‘ ] }, //在module -> rules里面添加 { test:/\.(jpg|png|gif)/, use:{ loader:‘url-loader‘, options:{ limit:8919, name:‘img/[name][hash:6].[ext]‘ } } },{ test:/\.js$/,//匹配所有js文件 use:{ loader:‘babel-loader‘, //语法转化的loader options:{ //转化的配置 presets:[‘@babel/preset-env‘], //设置预设 plugins:[ ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose" : true }], "@babel/plugin-transform-runtime" ] } }, include:path.resolve(__dirname,‘src‘),//转化当前文件夹下的src目录 exclude:/node_modules/ //排除不需要转化的目录 } ] }, // watch:true 监听代码跟新,实时打包,webpack-dev-server默认是开启的,所以我们不需要使用 watchOptions:{ ploo:1000, //设置多久检查一次,单位为毫秒 aggregateTimeout:500, //防抖,代码改变,500毫秒之后再自动打包 ignored:/node_modules/ //忽略不需要监听的文件 }, plugins:[//插件集,webpack的插件都放在里面,通过new来使用 new HtmlWebpackPlugin({ template:‘index.html‘,//使用的模板 filename:‘index.html‘,//打包出来的文件名称 minify:{//优化操作 removeAttributeQuotes:true, //去掉双引号 collapseWhitespace:true //去掉空格 }, }), new MiniCssExtractPlugin({ filename:‘./css/main[hash].css‘ }), new CleanWebpackPlugin() ] }
基本配置已经完结!
html中引入图片的问题我并没有解决!!
如果有错误请指出,谢谢!
原文地址:https://www.cnblogs.com/wangyao521/p/12098394.html