前段时间接触了webpack4..看了它的官网还是懵逼的,还是自己动动手实践一下吧。这样才能理解到各个属性以及插件的作用。顺便搭建个目录结构,供自己以后使用～ 所以就来做个笔记吧;)
顺便带你绕过 vue-cli 3.0，用 webpack4 一步步搭建 vue 项目。
后续会补充优化过后的配置、以及多页面配置～未完哦
基本配置
- 新建vue-spa-template文件夹 并进入到当前路径
npm init初始化项目 - 安装webpack 四件套。 webpack、webpack-cli、webpack-merge、webpack-dev-server
npm i webpack webpack-cli webpack-dev-server webpack-merge -D - 安装 vue以及核心插件 vue-loader、vue-template-compiler 并配置vue-loader
npm i vue -S(-S 等价于 -save) 一般是
npm i vue-loader vue-template-compiler -D(-D等价于-save dev)
4.安装 html-webpack-plugin 它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)
npm i html-webpack-plugin -D
- 处理加载样式css、less 安装css-loader、style-loader、less、less-loader并配置(如果有别的需求可自行配置)
npm i css-loader style-loader -D
npm i less less-loader -D - 处理加载图片 url-loader（原本是 file-loader）
npm i url-loader file-loader -D
1.url-loader依赖file-loader
2.当使用url-loader加载图片，图片大小小于上限值，则将图片转base64字符串，否则使用file-loader加载图片，都是为了提高浏览器加载图片速度。
3.使用url-loader加载图片比file-loader更优秀
以上6步是我认为每个项目都得用到的～ 安装完上面六步后，
新建目录、搭好基本的架构、并再相应的文件写好配置代码就ok了～～
文件目录如下(简陋版)：
|--build
|--webpack.base.js
|--webpack.dev.js
|--webpack.prod.js
|--src
|--index.js
|--app.vue
|--index.html
// webpack.base.js 基本配置
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry:'./src/index.js',//入口
module:{
rules:[
//配置vue-loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
//配样式loader
{
test:/\.(sa|c|le)ss$/,
use:[
'style-loader',
'css-loader',
'less-loader',
'sass-loader'
]
},
//配图片
{
test:/\.(png|svg|jpg|gif)$/,
use:[
{
//url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大，
//就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片。
loader: 'url-loader',
options: {
limit: 693061,
// 分离图片至imgs文件夹
name: "imgs/[name].[hash:7].[ext]",
}
},
]
},
//配音频等media文件
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'media/[name].[hash:7].[ext]'
}
},
//配字体
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name:'fonts/[name].[hash:7].[ext]'
}
}
]
},
plugins:[
//保持vender的hash不发生变化
new webpack.HashedModuleIdsPlugin(),
new VueLoaderPlugin(),
// new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../index.html'),
}),
]
}
//webpack.dev.js
const merge = require('webpack-merge'); //配置合并
const common = require('./webpack.base.js');
const path = require('path');
module.exports = merge(common, {
devtool: 'source-map',
devServer: { // 开发服务器
contentBase: '../dist',
open:true,
},
output: { // 输出
filename: 'js/[name].[hash].js', // 每次保存 hash 都变化
path: path.resolve(__dirname, '../dist')
},
module: {},
mode: 'development',
});
//webpack.prod.js
const path = require('path');
const merge = require('webpack-merge'); // 合并配置文件
const common = require('./webpack.base.js');
module.exports = merge(common, {
module: {},
plugins: [],
mode: 'production',
output: {
filename: 'js/[name].[contenthash].js', //contenthash 若文件内容无变化，则contenthash 名称不变
path: path.resolve(__dirname, '../dist')
},
});
<!-- app.vue -->
<!-- 图片路径自己改哈 -->
<template>
<div id="app">
{{message}}~ {{author}}fadfadfa～～
<div class="test">gre</div>
<img src="../src/resources/images/angle.png" alt="天使">
</div>
</template>
<script>
export default {
name: 'app',
data(){
return{
message:'Hiadfaf',
author:'Benny',
}
}
}
</script>
<style scoped lang="less">
#app{
color:#ffffff;
background: #009887;
img{
width: 200;
height: 200;
}
}
</style>
//index.js
import Vue from 'vue';
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App),
});
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
最后在package.json文件配置下命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --inline --progress --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
},
此时 npm start，项目可正常运行
网友评论