webpack.png
main.js
// 在webpack中尝试使用vue
// 在webpack中导入的vue包不完整, 只提供了runtime-only的方式, 并没有提供像网页的那种使用方式
// import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'
// 1 导入.vue文件
import login from './login.vue'
// 默认, webpack无法打包.vue文件 需要安装相关的loader:
// npm i vue-loader vue-template-compiler -D
var vm = new Vue({
el: '#app',
data: {
msg1: [1, 23, 23, 32,]
},
render: c => c(login)
});
login.vue
<template>
<div>
<h1>这是登录组件</h1>
</div>
</template>
<script>
</script>
<style>
</style>
webpack.config.js
const path = require('path');
// 导入在内存中生成的HTML插件 只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 这个配置文件, 其实就是一个js文件, 通过node 中的模块操作, 向外暴露了一个配置对象
module.exports = {
// 在配置文件中, 需要手动的指定入口和出口
entry: path.join(__dirname, './src/main.js'), // 入口, 表示webpack要打包那个文件
output: {
path: path.join(__dirname, './dist'), // 指定打包好的文件, 放在那个目录中去
filename: 'bundle.js', // 这里是指输出的文件名称
},
mode: 'production',
plugins: [
new htmlWebpackPlugin({ //创建一个在内存中生成html插件
template: path.join(__dirname, './src/index.html'), // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
filename: 'index.html' // 指定生成内存中的页面
}),
new VueLoaderPlugin()
],
// resolve: {
// alias: { // 修改vue 被导入时包的路径
// "vue$": "vue/dist/vue.js"
// }
// },
module: { // 这个节点用于配置所有的第三方模块的匹配规则
rules: [ // test是正则 use是用哪个第三方模块来处理
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 配置处理 .css文件的第三方规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 配置处理.less后缀的文件
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理.scss后缀文件
// limit限制图片大小 处理图片路径的loader ?& 传参 单位是byte 如果我们引用的图片大于或者等于给定的LIMIT的值
// 则不会被转为base64字符串, 否则相反 [name].[ext] 之前叫什么名现在还叫什么名字 [hash:8]-前面用8位hash值
{ test: /\.jpg|png|gif|bmp|svg|jpeg$/, use: 'url-loader?limit=500&name=[hash:8]-[name].[ext]' },
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 处理字体文件的loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, // 用于处理ES6 的高级语法转化低级语法
{ test: /\.vue$/, use: 'vue-loader'} // 处理.vue的loader
]
},
performance: {
hints: "warning", // 枚举
maxAssetSize: 30000000, // 整数类型（以字节为单位）
maxEntrypointSize: 50000000, // 整数类型（以字节为单位）
assetFilter: function(assetFilename) {
// 提供资源文件名的断言函数
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
};
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
网友评论