webpack的入门
自己配置webpack需要先安装好webpack,这里不建议全局安装,因为不同项目可能需要用到不同版本的webpack。现在package.json里添加一下命令,方便启动webpack,
"dev": "webpack --mode=development", //这是开发环境的打包,代码不会压缩 "dev": "webpack --mode=production", //这是生产环境的打包,代码会压缩
webpack有四个核心概念:
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
mode可以定义webpack打包后是生产环境还是开发环境,配置项有development , production。
入口entry顾名思义就是指定一个要打包的文件,这个是必须的。
输出output,就是指定打包压缩好的文件输出到哪个地方,这里注意需要用到绝对路径
const path = require('path') module.exports = { mode:'production', //开发环境代码不压缩 //生产环境代码压缩 entry:'./demo1/src/index.js', // output不写的话就是默认路径 output:{ path:path.join(__dirname,'./demo1/dist'), filename:'main.js' } }
loader是加载器,webpack只能识别js的模块,对于css和图片或者其他文件是没办法识别的,所以需要另外的加载器来实现这个功能。
plugin是插件,webpack的一些功能不是很完善,需要引入其他的插件来实现某些功能,比如打包后的html文件需要改变一下引用地址,这时候需要htmlWebpackPlugin插件来实现
const path = require('path')
const HtmlWebapckPlugin = require('html-webpack-plugin') //引入插件
module.exports = { mode:'production', entry:"./demo3/src/index.js", // output不写的话就是默认路径 output:{ path:path.join(__dirname,'./demo3/dist'), // 加上hash值可以每次重新打包一个新的,不加也可以更新文件的内容 filename: 'main.js' }, module:{ rules:[ //加载图片 { test:/\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit:9999 } } ] }, // 加载css { test: /\.(css)$/i, use:[ 'style-loader', 'css-loader' ] } ] }
//插件
plugins:[
new HtmlWebapckPlugin({
filename:'index.html',
template:path.join(__dirname,'../public/index.html')
})
]
}