记录Webpack 第一天学习
🕛
module.exports = {
mode:"development",//模式/压缩:
entry:{
main: './src/index.js'//打包入口文件
},
module:{
rules: [
{
test:/\.(jpg|png|gif)$/,//正则匹配文件后缀
use:{
loader:'file-loader',//loader 打包工具
options:{
name:'[name].[ext]',//名字hash 就是乱码。ext就是原始名字
outputPath:'images/'//保存的某个目录下
}
}
},
{
test:/\.css$/,
use:[
'style-loader', //挂在页面
{
loader: 'css-loader',//拆分css文件
options:{
// modules:true //css模块化
}
},
// ,'sass-loader',
// 'postcss-loader'
]
}
]
},
output: {
path: path.resolve(__dirname, 'mydist'), //打包的名字
filename: 'bundle.js'
},
plugins: [new HtmlWebpackPlugin({
template:'src/index.html'
})]}
-
入口文件：entry 如果不设置的话默认为index.js
-
模式: mode 有两种，一个是压缩后的 一个是未压缩的
-
output : 打包的名 以及打包后js的名称
output:
常用loader：rules 接收一个数组用于存放所有的loader
file-loader
{
test:/\.(jpg|png|gif)$/,//正则匹配文件后缀
use:{
loader:'file-loader',//loader 打包工具
options:{
name:'[name].[ext]',//名字hash 就是乱码。ext就是原始名字
outputPath:'images/'//保存的某个目录下
}
}
},
-
css-loader:处理css样式
-
stuly-loader 映射到页面
-
sass-loader 处理sass文件
-
postcss-loader 用于处理css3各种厂商前缀
{
test:/\.css$/,
use:[
'style-loader', //挂在页面
{
loader: 'css-loader',//拆分css文件
options:{
// modules:true //css模块化
}
},
// ,'sass-loader',
// 'postcss-loader'
]
}
遇到一个问题，打包后还需要创建index.html，这是不符合规范的，vue也是创建了模板html最后打包直接复制，这就用到了我们的插件HtmlWebpackPlugin
plugins: [new HtmlWebpackPlugin({
template:'src/index.html'
//如果不配置模板的话，则只会生成引入相应的js文件，配置模板是正确选择
})]}
###plugins 在webpack运行到某一刻的时候做某些事情，跟生命周期类似
当我们配置到这一步的时候，发现新打包后的文件并不是先删除，再打包的，这跟我们平时用的vue-cli react-app 却不一样
那该如何解决呢，clarnwebpackplugins就给我解决了这个问题，但是这个插件并不是官方的插件，而是第三方的
npm install clean-webpack-plugin -D
执行npm命令安装，在webpack.config.js里配置(如下)
// 声明一个变量 使用它！
const CleanWebpackPlugin = require('clean-webpack-plugin')
//之前我们说的要new实例化一下这个插件，在plugins这个类声明周期里将dist目录先删除再打包
new CleanWebpackPlugin(['dist'])
然后我们愉快的npm run build
what?😰
TypeError: CleanWebpackPlugin is not a constructor
查阅了资料后发现新版本的插件必须写成
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
好了，那这样我们总可以愉悦的去打包了把
竟然又报错了。。。，好了不要愤怒，我们来看一下报错原因
clean-webpack-plugin only accepts an options object. See:
原谅我写成数组了 手动捂脸
new CleanWebpackPlugin ()
//打包完成，搞定，可以发现，当我们build后 clean-webpack-plugin会删除原来的打包目录，重新建立一个
记录Webpack 第二天学习🕧
Entry output 多文件基本配置
Entry：
main: './src/index.js'//打包入口文件
output：
path: path.resolve(__dirname, 'mydist'),
filename: 'build.js'
###基本的entry 配置，我就不举个栗子说明了，假设有一个需求，需要我们打包两次入口文件那该如何去做呢，请客官们往下看
entry:{
main: './src/index.js',//打包入口文件，
sub: './src/index.js'//打包入口文件
},
那我们来复制两份试试呢？ 答案当然是不行的😰
你明明声明了两个文件 却只打包了一个文件？？行行行，爷为了学你，也是憋得住的那咱们看一下这个🌰
还记得我们用loader 打包图片的占位符嘛？so 就是用它，搞起来搞起来
output: {
path: path.resolve(__dirname, 'mydist'),
filename: 'build.js'
},
👇👇👇
output: {
path: path.resolve(__dirname, 'mydist'),
filename: '[name].js'
},
//当第一次打包的时候 main 会根据name
//生成一个main的js文件，再继续进行打包会生成sub，也就是相当于循环调用name
entry:{
main: './src/index.js',//打包入口文件，
sub: './src/index.js'//打包入口文件
},
打包成功后你会发现
webpack 会自动把我们打包的JS 给注入到了html上,是因为之前我们配置的html-webpack-pulgin！！！
服务端CDN文件打包配置
如果我们的项目打包后的JS文件是放在服务端上，那么我们又该如何操作呢，靠手动去一个一个加是不靠谱的，举个🌰
</script><script type="text/javascript" src="main.js">
👇
</script><script type="text/javascript" src="www.dnmd.com/sub.js"></script></body>
这样的打包，我们又该如何处理呢，别急，爷慢慢讲
只需要找到我们的output 加上publicPath这个属性，后面配置我们的域名就🆗了，给爷鼓鼓掌👏
output: {
** publicPath:'www.dnmd.com',**
path: path.resolve(__dirname, 'mydist'),
filename: '[name].js'
},
