记 ——webpack4.0基础配置
Posted wangyao521
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记 ——webpack4.0基础配置相关的知识，希望对你有一定的参考价值。
才学完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.js
requier(‘./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中引入图片的问题我并没有解决！！
如果有错误请指出，谢谢！
以上是关于记 ——webpack4.0基础配置的主要内容，如果未能解决你的问题，请参考以下文章