这是一篇翻译 + 总结。
粗略讲述了如何不通过 vue-cli 创建 vue 项目。
原文: How to create a Vue.js app using Single-File Components, without the CLI..
创建 hello-world文件夹,命令行输入 npm init, 一路回车。
src文件夹:存放HTML,JS,.vue文件。
webpack.config.js文件:Webpack配置文件。
使用NPM:自动生成 package.json文件 + node_modules文件夹
vue:JS框架。
vue-loader & vue-template-compiler:将我们 .vue 文件转换成 JS。
webpack:工具,可以进行代码转换、打包。
webpack-cli:用来运行 webpack 命令。
webpack-dev-server:开发时的服务器。
babel-loader:将 ES6 转换成 ES5,它需要下面两个依赖。
@babel/core & @babel/preset-env:单独的 Babel 不会对你的代码做任何事情,这两个插件允许将我们的 ES6代码 转换成 ES5。
css-loader:提取 .vue 文件里的CSS,或者我们 import 到 JS文件 里的CSS,并解析路径。换句话说,找出CSS位置。我们需要接下来的 loader 来对CSS进行实际的处理。
vue-style-loader:获得从 css-loader 提取的CSS,注入到 HTML文件 中。这将在 HTML文档 头部创建并注入一个样式标签。
html-webpack-plugin:获得 index.html文件,在头部注入打包好的 JS文件,并将此文件拷贝到 dist文件夹。
rimraf:允许我们通过命令行删除文件。当多次 build 项目时,可以使用它删除 旧的build文件。
npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D
index.html:
vue hello world
main.js:
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
App.vue:
{{message}}
h3
在根目录下创建 webpack.config.js文件:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].bundle.js"
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{ test: /\.vue$/, loader: 'vue-loader' },
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new VueLoaderPlugin(),
]
};
接下来逐行解释:
1 ~ 2:引入两个插件。
3:引入 node 的 path 模块。
5:将配置导出( export )为对象,在运行 webpack 命令时可以对其访问。
6:入口。Webpack 需要一个起点,这里是 ./src/main.js,它会从 main.js 文件开始查找并梳理我们的代码。
7 ~ 10:出口。path:路径,filename:生成的打包文件的名称。
11 ~ 12:module 对象,其中有一个规则数组( module.rules ),每个规则告诉 webpack 如何处理某些文件
13 ~ 21(rule):指示 webpack 使用 babel-loader 处理 src文件夹 里的 .js文件。(Babel 会将 ES6 转换成 ES5)
22(rule):指示 webpack 使用 vue-loader 将 .vue文件 转换成 JS。(不要忘了29行的关联插件)。
23(rule):多个 loader 时,webpack 从右向左执行相关 loader。这里的两个 loader 告诉 webpack 从 Vue文件 或者任何 JS文件 中获取CSS(css-loader),然后将其作为样式标签注入到HTML 中(vue-style-loader)。
25:plugins 数组,这里我们添加了两个插件。
26 ~ 28(plugin):HtmlWebpackPlugin插件 获取 index.html 文件位置,将打包好的 JS文件 通过 script标签 添加进去。在我们 build 我们的项目时,这个插件还会复制 HTML文件 到我们的分发文件夹中。
29(plugin):VueLoaderPlugin插件,与 vue-loader 一起解析我们的 .vue文件。
配置完成后,查看我们的项目。我们期望每次修改项目时浏览器自动更新,就需要用到 webpack-dev-server。
"scripts": {
"serve": "webpack-dev-server --mode development"
},
–mode development:非必须,告诉 webpack 当前是 开发者模式。当我们 build 项目时,可以换成 --mode production。
npm run serve
可以看到:
打开浏览器查看。此时如果修改 message 内容,浏览器会自动更新。h2 内容会随着 input 输入内容一起变化。但是如果此时修改 h3 里的内容,就会发现 h2 重新变回 “hello world”。这是因为浏览器进行了刷新,script标签 和 页面重新加载。也就是说,我们无法维持应用程序的状态。为了解决此问题,Webpack 提供了 热替换模块(Hot Module Replacement,也称 HMR)。
webpack.config.js文件中增加:
devServer: {
open: true,
hot: true
}
open:告诉 dev-server 在 server 启动后打开浏览器,即:执行 npm run server 后自动打开浏览器。
hot:启用 webpack 的 HMR 功能。
当我们执行 npm run serve 时,发现并没有文件创建。这是因为 webpack 只是在缓存中创建了这些文件。如果我们想要发布我们的项目,就需要 build。
使用 webpack 替换 webpack-dev-derver,使用 –mode production。删除之前的 build 文件:rimraf dist
"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && webpack --mode production",
"serve": "webpack-dev-server --mode development"
}
npm run build:会先执行 npm run clean,然后执行 webpack。创建一个dist文件夹,里面有我们的代码: