1.新建空白项目目录
mkdir simple-template
cd simple-template
2.初始化项目
npm init -y
3.安装webpack
npm i webpack webpack-cli -D
4.新建src文件夹,并在其下新建main.js文件,如下
5.在根目录下新建index.html文件,内容如下
6.新建webpack.config.js配置文件
7.终端输入npx webpack
命令进行打包
8.打包成功,在浏览器打开index.html文件,如下
9.在src目录下新建style.css
样式文件,如下
10.在main.js
文件中引入style.css
样式文件,如下
11.再次打包,终端执行npx webpack
,报错如下
- 解析
./src/stye.css
错误,需要一个loader来解析
12.安装style-loader
&& css-loader
来处理css文件,并配置webpack.config.js文件
npm i -D style-loader css-loader
13.再次打包,成功
14.浏览器打开index.html
文件,如下,样式加上了
15.在package.json自定义打包命令npm run build
,替代npx webpack
,如下
16.修改main.js
,如下,并在src目录下新建App.vue文件
// main.js内容如下
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h=>h(App),
})
// App.vue内容如下
<template>
<div>我是App.vue</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
17.使用npm run build进行打包,报错如下,需要一个loader来处理vue类型的文件
18.安装vue-loader
和vue-template-compiler
,并配置webpack.config.js
文件
文档地址:https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE
npm i vue-loader vue-template-compiler -D
// webpack.config.js内容修改如下
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin()
]
}
19.执行npm run build
,报错如下,是因为还没有安装vue
npm i vue -S
20.再进行打包,可成功并可在浏览器查看index.html内容,
21.继续
21.继续
21.继续
21.继续
21.继续
21.继续
最终,有下面这2个文件就行了
// package.json
{
"name": "simple-template",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"vue-loader": "^15.9.5",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.6.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"vue": "^2.6.12"
}
}
// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'build.js',
},
devServer: {
contentBase: './dist'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 请确保引入这个插件!
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: '自定义标题',
template: 'public/index.html'
})
]
}