1、在磁盘中创建项目： D:\vue\webpackvue2 并使用命令行进入
2、初始化项目生成package.json，运行命令：
npm init
image.png
3、本地局部安装webpack （--save-dev 会作为开发依赖来安装webpack，注意webpack版本为4.X）
命令： npm install webpack --save-dev
4、安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等
命令： npm install webpack-dev-server --save-dev
5、安装webpack-cli(webpack 4.X必须安装 webpack-cli)
命令： npm install webpack-cli --save-dev
6、工程下创建一个js 文件： build/webpack.config.js （webpack配置文件）
// webpack配置
var config = {
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config
7、在package.json中的scripts增加一个启动脚本：
"script" : {
"dev": "webpack-dev-server --open --config build/webpack.config.js"
...
image.png
8、启动项目查看：
命令：npm run dev
image.png
9、在工程下面建立src目录并创建main.js
- 改动webpack.config.js
//
var path = require('path');
// webpack配置
var config = {
// 入口
entry: {
// 配置的单入口
main: './src/main.js'
},
// 出口(打包后的文件会存储为demo/dist/main.js 文件)
output: {
// 选项用来存放打包后文件的输出目录(必填项)
path: path.join(__dirname, './dist'),
// 指定资文件引用的目录
publicPath: '/dist/',
// 指定输出文件的名称
filename: 'main.js'
}
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config
11、工程下建立index.html作为SPA入口
<!DOCTYPE HTML>
<html>
<head>
<title> </title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">
hello world
</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
12、控制台停止，重新 npm run dev
image.png
13、在webpack.config.js增加对css处理 需要先安装css loader
npm install css-loader --save-dev
npm install style-loader --save-dev
webpack.config.js 改动
//
var path = require('path');
// webpack配置
var config = {
// 入口
entry: {
// 配置的单入口
main: './src/main.js'
},
// 出口(打包后的文件会存储为demo/dist/main.js 文件)
output: {
// 选项用来存放打包后文件的输出目录(必填项)
path: path.join(__dirname, './dist'),
// 指定资文件引用的目录
publicPath: '/dist/',
// 指定输出文件的名称
filename: 'main.js'
},
// module
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config
14、在src/建立style.css，并在main.js中导入
style.css
body {
background: red;
}
main.js
import './style.css'
image.png
15、上面导入样式会直接生成<style></style>代码段，需要安装webpack 插件 (css提取到公共文件中)，webpack4.X 要加上@next
命令： npm install extract-text-webpack-plugin@next --save-dev
16、提取css到公共文件,webpack.config.js 改写
//
var path = require('path');
// 导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// webpack配置
var config = {
// 入口
entry: {
// 配置的单入口
main: './src/main.js'
},
// 出口(打包后的文件会存储为demo/dist/main.js 文件)
output: {
// 选项用来存放打包后文件的输出目录(必填项)
path: path.join(__dirname, './dist'),
// 指定资文件引用的目录
publicPath: '/dist/',
// 指定输出文件的名称
filename: 'main.js'
},
// module
module: {
rules: [
{
test: /\.css$/,
/*use: [
'style-loader',
'css-loader'
]*/
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
// 插件
plugins: [
// 重新命名提取后css文件
new ExtractTextPlugin("main.css")
]
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config
index.js 添加:
<link rel="stylesheet" type="text/css" href="/dist/main.css" />
image.png
17、webpack安装vue插件(使用. vue 文件需要先安装vue-loader 、vue-style-loader 等加载器并做配置。因为要使用ES6 语法，还需要安装babel 和babel-loader 等加载器)
npm install --save vue
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
npm install --save-dev vue-hot-reload-api
npm install --save-dev babel
npm install --save-dev babel-loader
npm install --save-dev @babel/core
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-runtime
18、安装完成后修改webpack.config.js来支持对vue及es6的解析
//
var path = require('path');
// 导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 导入vueLoader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// webpack配置
var config = {
// 入口
entry: {
// 配置的单入口
main: './src/main.js'
},
// 出口(打包后的文件会存储为demo/dist/main.js 文件)
output: {
// 选项用来存放打包后文件的输出目录(必填项)
path: path.join(__dirname, './dist'),
// 指定资文件引用的目录
publicPath: '/dist/',
// 指定输出文件的名称
filename: 'main.js'
},
// module
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
/*use: [
'style-loader',
'css-loader'
]*/
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
}
]
},
// 插件
plugins: [
// 重新命名提取后css文件
new ExtractTextPlugin("main.css"),
new VueLoaderPlugin()
]
}
// 等同于exprot default {},只因这里还没有es6
module.exports = config
19、项目根目录下创建 .babelrc 文件
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
20、在src创建App.vue，即：src/App.vue
<template>
<div class="message">
{{message}}
</div>
</template>
<script>
export default {
data(){
return {
message: 'hello Vue'
}
}
}
</script>
<style>
.message {
border: 1px solid red;
}
</style>
21、更改src/main.js
// app入口
// import './style.css'
// 导入vue框架
import Vue from 'vue'
// 导入app.vue
import App from './App.vue'
// 创建vue实例
new Vue({
el: '#app',
render: h => h(App)
})
22、npm run dev 查看
image.png
image.png
image.png
image.png
image.png
网友评论