图片云：https://sm.ms/
npm init -ywebpack 官方安装文档
npm install --save-dev webpack webpack-cli // 使用的是webpack4.39.3touch webpack.config.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用webpack4手动撸一个vue工程，不使用vue-cli</title>
</head>
<body>
<div id="app"></div>
</body>
</html>src 目录下
|-- App.vue
|-- assets
| `-- public
| |-- Script
| |-- css
| `-- images
|-- components
| `-- HelloWorld.vue
|-- main.js
`-- router
`-- index.js<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
</style>import Vue from 'vue'
import App from './App.vue'
import router from './router'
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App)
}).$mount("#app")<template>
<div class='helloworld'>
你好 VUE
</div>
</template>
<script>
export default {
beforeRouteEnter(to, from, next) {
return next(vm => {});
},
name: 'helloworld',
data() {
return {};
},
}
</script>
<style scoped>
</style>import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('../components/HelloWorld.vue'),
}
],
})
export default routernpm install --save vue vue-router
到这我们就把项目的框架搭建完毕，接下来我们配制开发环境，使我们搭建的项目可以在浏览器端像vue-cli一样 执行 npm run dev 命令跑起来！！
// 安装本地服务器插件
npm install -D webpack-dev-server
// html插件自动添加js文件
npm install -D html-webpack-plugin
// vue 单文件组件
npm i vue-loader vue-template-compiler -D
// 安装css
npm i css-loader style-loader -Dconst path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development', // production Or development 环境
entry: "./src/main.js", // 入口文件
output: {
path: path.resolve(__dirname, "dist"), // 必须是绝对路径
filename: "js/[name].[hash].js", // 「入口分块(entry chunk)」的文件名模板（出口分块？）
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true, // 压缩
port: 8080,
hot: true, // 热加载
open: false, //自定打开默认浏览器
},
plugins: [ // 插件
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html',
minify: true, //压缩
hash: false, //添加hash清除缓存
}),
new VueLoaderPlugin()
],
module: {
rules: [
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: path.resolve(__dirname, 'node_modules') // 排除文件
}
]
},
}"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --info=true --progress --color"
}执行 npm run dev 启动后 浏览器地址栏输入 localhost:8080 就会看到 你好 VUE！！
到这我们使用webpack4 简单配制 vue项目算是初步完成！
安装 cross-env
npm install -D cross-env or yarn add cross-env --dev"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server --info=true --color"
}
const NODE_ENV = process.env.NODE_ENV // production or development
// 修改 mode
mode: NODE_ENV
添加
const sourceMap = true
// module.exports 中添加
devtool: NODE_ENV === 'production' ? sourceMap ? '#source-map' : '' : '#eval-source-map', // 线上环境可以选择不生成map 文件
注意 不能同时使用 devtool 选项和 SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件。devtool
现在 一个简单的 vue 项目生成了 vue + webpack4.x
修改 启动配制
npm install -D friendly-errors-webpack-plugin
// webpack.config.js
if (NODE_ENV === 'development') {
module.exports.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`运行在: http://${devObj.host}:${devObj.port}`],
}
}))
}
// package.json
"scripts": {
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development webpack-dev-server --info=false --color" // 修改
},具体修改 请看webpack.config.js 文件，文档可能更新不及时。
后续配置中记录一次错误
当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html。devServer.historyApiFallback 默认禁用
出现此错误的原因是没有配置 historyApiFallback 路径重写
devserver中添加
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(devObj.assetsPublicPath, 'index.html') },
],
},