1、在磁盤中創(chuàng)建項(xiàng)目： D:\vue\webpackvue2 并使用命令行進(jìn)入
2、初始化項(xiàng)目生成package.json，運(yùn)行命令：
npm init
image.png
3、本地局部安裝webpack （--save-dev 會(huì)作為開(kāi)發(fā)依賴來(lái)安裝webpack，注意webpack版本為4.X）
命令： npm install webpack --save-dev
4、安裝webpack-dev-server，它可以在開(kāi)發(fā)環(huán)境中提供很多服務(wù)，比如啟動(dòng)一個(gè)服務(wù)器、熱更新、接口代理等
命令： npm install webpack-dev-server --save-dev
5、安裝webpack-cli(webpack 4.X必須安裝 webpack-cli)
命令： npm install webpack-cli --save-dev
6、工程下創(chuàng)建一個(gè)js 文件： build/webpack.config.js （webpack配置文件）
// webpack配置
var config = {
}
// 等同于exprot default {},只因這里還沒(méi)有es6
module.exports = config
7、在package.json中的scripts增加一個(gè)啟動(dòng)腳本：
"script" : {
"dev": "webpack-dev-server --open --config build/webpack.config.js"
...
image.png
8、啟動(dòng)項(xiàng)目查看：
命令：npm run dev
image.png
9、在工程下面建立src目錄并創(chuàng)建main.js
- 改動(dòng)webpack.config.js
//
var path = require('path');
// webpack配置
var config = {
// 入口
entry: {
// 配置的單入口
main: './src/main.js'
},
// 出口(打包后的文件會(huì)存儲(chǔ)為demo/dist/main.js 文件)
output: {
// 選項(xiàng)用來(lái)存放打包后文件的輸出目錄(必填項(xiàng))
path: path.join(__dirname, './dist'),
// 指定資文件引用的目錄
publicPath: '/dist/',
// 指定輸出文件的名稱
filename: 'main.js'
}
}
// 等同于exprot default {},只因這里還沒(méi)有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、控制臺(tái)停止，重新 npm run dev
image.png
13、在webpack.config.js增加對(duì)css處理 需要先安裝css loader
npm install css-loader --save-dev
npm install style-loader --save-dev
webpack.config.js 改動(dòng)
//
var path = require('path');
// webpack配置
var config = {
// 入口
entry: {
// 配置的單入口
main: './src/main.js'
},
// 出口(打包后的文件會(huì)存儲(chǔ)為demo/dist/main.js 文件)
output: {
// 選項(xiàng)用來(lái)存放打包后文件的輸出目錄(必填項(xiàng))
path: path.join(__dirname, './dist'),
// 指定資文件引用的目錄
publicPath: '/dist/',
// 指定輸出文件的名稱
filename: 'main.js'
},
// module
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
// 等同于exprot default {},只因這里還沒(méi)有es6
module.exports = config
14、在src/建立style.css，并在main.js中導(dǎo)入
style.css
body {
background: red;
}
main.js
import './style.css'
image.png
15、上面導(dǎo)入樣式會(huì)直接生成<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');
// 導(dǎo)入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// webpack配置
var config = {
// 入口
entry: {
// 配置的單入口
main: './src/main.js'
},
// 出口(打包后的文件會(huì)存儲(chǔ)為demo/dist/main.js 文件)
output: {
// 選項(xiàng)用來(lái)存放打包后文件的輸出目錄(必填項(xiàng))
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 {},只因這里還沒(méi)有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 等加載器并做配置。因?yàn)橐褂肊S6 語(yǔ)法，還需要安裝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來(lái)支持對(duì)vue及es6的解析
//
var path = require('path');
// 導(dǎo)入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 導(dǎo)入vueLoader
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// webpack配置
var config = {
// 入口
entry: {
// 配置的單入口
main: './src/main.js'
},
// 出口(打包后的文件會(huì)存儲(chǔ)為demo/dist/main.js 文件)
output: {
// 選項(xiàng)用來(lái)存放打包后文件的輸出目錄(必填項(xiàng))
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 {},只因這里還沒(méi)有es6
module.exports = config
19、項(xiàng)目根目錄下創(chuàng)建 .babelrc 文件
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
20、在src創(chuàng)建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'
// 導(dǎo)入vue框架
import Vue from 'vue'
// 導(dǎo)入app.vue
import App from './App.vue'
// 創(chuàng)建vue實(shí)例
new Vue({
el: '#app',
render: h => h(App)
})
22、npm run dev 查看
image.png
image.png
image.png
image.png
image.png
