1.新建空白项目目录
mkdir simple-template
cd simple-template
2.初始化项目
npm init -y
3.安装webpack
npm i webpack webpack-cli -D
image.png
4.新建src文件夹，并在其下新建main.js文件，如下
image.png
5.在根目录下新建index.html文件，内容如下
image.png
6.新建webpack.config.js配置文件
image.png
7.终端输入npx webpack命令进行打包
image.png
8.打包成功，在浏览器打开index.html文件，如下
image.png
9.在src目录下新建style.css样式文件，如下
image.png
10.在main.js文件中引入style.css样式文件，如下
image.png
11.再次打包，终端执行npx webpack，报错如下
- 解析
./src/stye.css错误，需要一个loader来解析
image.png
12.安装style-loader && css-loader来处理css文件，并配置webpack.config.js文件
npm i -D style-loader css-loader
image.png
13.再次打包，成功
image.png
14.浏览器打开index.html文件，如下，样式加上了
image.png
15.在package.json自定义打包命令npm run build，替代npx webpack，如下
image.png
16.修改main.js，如下，并在src目录下新建App.vue文件
image.png
// 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类型的文件
image.png
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
image.png
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
image.png
20.再进行打包，可成功并可在浏览器查看index.html内容，
image.png
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'
})
]
}
网友评论