由于本文内容是通过 npm 来加载 vue,所以开始之前需安装 nodejs 环境,安装完成之后再执行以下步骤:
- mkdir vue-demo
- cd vue-demo
npm init
大概生成的 package.json 如下:
- {
- "name": "vue-demo",
- "version": "1.0.0",
- "description": "this is a vue demo",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "license": "ISC",
- "dependencies": {}
- }
- npm install webpack & nbsp; --save - dev
如果使用 npm 下载的速度过慢,可以使用淘宝的 cnpm 镜像
- npm install -g cnpm –registry=https://registry.npm.taobao.org
输入以上命令即可将 npm 指向国内镜像,使用时需将 npm 替换成 cnpm 即可, 其他不变
- const path = require('path')
- module.exports ={
- entry:'./src/main.js',
- output:{
- path:path.resolve(__dirname,'dist'),
- filename:"demo.js"
- }
- }
webpack
编译之后的项目目录大概如下:
注意:在使用 webpack 命令之前 需先创建 index.html 和 main.js 文件 其中 main.js 文件位于 src 目录下
index.html 的内容如下
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue demo</title>
- </head>
- <body>
- <script src="./dist/demo.js"></script>
- </body>
- </html>
main.js 的内容如下
- alert('hello world');
- npm install vue--save
执行命令后会在 package.json 中新增如下代码
"dependencies": {"vue": "^2.4.2"}
将 main.js 中的内容修改为如下代码
- import Vue from 'vue'
- var vm = new Vue({
- el: '#app',
- data: {
- msg: 'hello vue'
- }
- })
- npm install--save - dev babel - core babel - loader
由于在使用 vue 时会用到很多 es6 的语法,但是现在很多浏览器对 es6 的支持不是很好,所以在编译时需要将这些语法转换 es5 的语法,此时我们使用 babel 来进行编译。
babel 的使用请阅读官网文档 http://babeljs.cn/。
将 babel 加入到 webpack.config.js 配置文件中:
- const path = require('path')
- module.exports ={
- entry:'./src/main.js',
- output:{
- path:path.resolve(__dirname,'dist'),
- filename:"demo.js"
- },
- module:{
- rules:[
- {
- test: /\.js$/,
- loader:"babel-loader",
- exclude: /node_modules/
- }
- ]
- }
- }
然后命令行输入 webpack 命令即可进行编译,再编译完成后用浏览器打开 index.html 文件,此时会发现浏览器控制台出现以下错误:
- [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
- (found in <Root>)
这是因为正在使用的是 vue 的运行时版本,而此版本中的编译器时不可用的,我们需要把它切换成运行时 + 编译的版本,需要在配置文件中添加如下代码
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
- }
- }
此时在运行 webpack 命令重新编译,编译后在访问 index.html 页面,页面内容如下图
此时一个基于 webpack 的 vue 项目就搭建好。
在项目的实际开发中我们还会引入 CSS、图片以及字体等资源文件。这些文件的引入都需要相应的加载器才能将其加载到项目中并正常使用。
下面只介绍部分我们需要的加载器的使用方法, 更多信息请查阅 webpack 加载器文档 。
我们需要引入 css-loader、和 style-loader (安装 style-loader 的目的是为了在 html 中以 style 的方式嵌入 css)。
执行命令
- npm install--save - dev css - loader style - loader
在 webpack.config.js 中进行如下配置
- module: {
- rules: [{
- test: /\.js$/,
- loader: "babel-loader",
- exclude: /node_modules/
- }, {
- test: /\.css$/,
- loader: 'style-loader!css-loader'
- }]
- },
然后再 src 目录下 新建一个 styles 的文件夹并在里面添加一个 main.css 的文件, 写上以下内容
- #app {
- color: red;
- }
然后再运行 webpack 命令, 并重新加载 index.html 文件 , 可见 css 已经生效, 效果如下图
使用 file-loader 或者 url-loader 加载器进行加载,他们都是用于打包文件和图片资源的,两者的区别是 url-loader 在 file-loader 的基础上进行了一次封装。
在访问网站时如果图片较多,会发很多 http 请求,会降低页面性能。这个问题可以通过 url-loader 解决。url-loader 会将引入的图片编码,生成 dataURl。相当于把图片数据翻译成一串字符, 再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。
当然,如果图片较大,编码会消耗性能。因此 url-loader 提供了一个 limit 参数,小于 limit 字节的文件会被转为 DataURl,大于 limit 的还会使用 file-loader 进行 copy。
此处我们使用 url-loader, 由于它是基于 file-loader 的封装,所以也需要引入 file-loader。
- npm install--save - dev file - loader url - loader
webpack.config.js 的 rules 中增加如下配置
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000
- }
- }
接下来就是将图片引入到代码中,需要在 main.js 和 index.html 分别作如下修改:
main.js
- import Vue from 'vue'
- import './styles/main.css'
- import logo from'./images/logo.png'
- var vm = new Vue({
- el:'#app',
- data:{
- logo:logo,
- msg:'hello vue'
- }
- })
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue demo</title>
- </head>
- <body>
- <div id="app">
- <img :src="logo" alt="logo" class="logo">
- {{msg}}
- </div>
- <script src="./dist/demo.js"></script>
- </body>
- </html>
最后运行 webpack 命令并访问 index.html ,结果如下
在测试中发现当图片大于 10KB 的时候发现加载图片失败,找不到图片,但此时在 dist 目录下面是能看到已经通过加载器加载成功了的图片,再通过浏览器的开发者工具对图片的引用路径进行检查时,可以发现页面中 img 的路径不对,路径中只有文件名缺失了前面的 dist 目录, 所以此时我们需要将 main.js 中的代码进行如下修改
- logo:"./dist/"+logo,
重新编译后图片就显示出来了。但是现在新的问题又出来了,由于我们在配置文件中配置了小于 10kb 的代码将以 base64 的形式内联在代码中。所以此时是不需要 "./dist" 这个前缀的。 解决此问题有两种办法:
将 html 文件放到 dist 目录中最简单的办法就是把 index.html 文件复制到 dist 目录中,然后将引入就是的代码改为:
- <script src="./demo.js" > </script>
main.js 中改回原来的设置
logo:logo,
重新编译后图片在两种情况下都可以加载出来了。
还有一中比较常用的方式是在编译时自动在 dist 的目录中创建一个 html 文件并将 index.html 中的内容复制过去。此时我们需要时 webpack 的 HtmlWebpackPlugin 插件。
引入插件
- npm install--save - dev html - webpack - plugin
webpack.config.js 中增加如下配置
- const HtmlWebpackPlugin = require('html-webpack-plugin')
- ...
- plugins:[
- new HtmlWebpackPlugin()
- ]
重新编译后发现在 dist 目录下生成了如下内容的 html 的文件
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Webpack App</title>
- </head>
- <body>
- <script type="text/javascript" src="demo.js"></script></body>
- </html>
与我们原来自己的写 index.html 相比,该文件缺少了下面这些这些内容
- <div id="app">
- <img :src="logo" alt="logo" class="logo">
- {{msg}}
- </div>
现在需要对配置文件做稍微的修改,让 html 文件在创建的时候自动将 index.html 的中内容复制过去。通过查阅该插件的文档,可知需做如下修改:
- plugins:[
- new HtmlWebpackPlugin({
- title: 'vue demo',
- template: 'index.html'
- })
- ]
index.html 文件中 去除 script 代码,在重新编译后,即可获取我们需要的 html 文件
详细参数配置请参考 官方文档
在我们实际开发中需要将代码部署在 server 中,而不是在浏览器中直接打开文件。此时我们需要使用 webpack 的 webpack-dev-server 。
webpack-dev-server 为我们提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。
- npm install --save-dev webpack-dev-server
在 webpack.config.js 文件中需要指定一个文件夹, 告诉开发服务器需要从哪儿加载文件
- const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin')
- module.exports = {
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, 'dist'),
- filename: "demo.js"
- },
- plugins: [new HtmlWebpackPlugin({
- title: 'vue demo',
- template: 'index.html'
- })],
- devServer: {
- contentBase: "./dist"
- },
- module: {
- rules: [{
- test: /\.js$/,
- loader: "babel-loader",
- exclude: /node_modules/
- },
- {
- test: /\.css$/,
- loader: 'style-loader!css-loader'
- },
- {
- test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000
- }
- }]
- },
- resolve: {
- alias: {
- 'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
- }
- }
- }
上面红色字体的配置信息是告知 webpack-dev-server, 在 localhost:8080 下建立服务,将 dist 目录下的文件,作为可访问文件。
让我们在 package.json 中添加一个 script 脚本, 可以直接运行开发服务器 (dev server):
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1",
- "dev":"webpack-dev-server --open",
- "build": "webpack"
- },
然后输入如下命令
npm run dev
启动完成后,浏览器会自动打开一个访问 http://localhost:8080/ 的页面
此时服务已启动成功。
字体的加载方式与图片的一样也是用 url-loader,配置如下
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000
- }
- }
在 vue 的开发过程中,通常我们需要写. vue 结尾的文件即组件,如 app.vue
- <template>
- <div id="app">
- <img src="./images/logo2.jpg" alt="logo" >
- {{msg}}
- </div>
- </template>
- <script>
- export default {
- name:'app',
- data(){
- return {
- msg:"hello vue !!"
- }
- }
- }
- </script>
该文件需要通过 vue-loader 来进行加载,现在我们需要做如下配置。通过 vue-loader 和 vue-template-compiler 来加载并编译. vue 文件
- npm install --save-dev vue-loader vue-template-compiler
webpack.config.js 中
- {
- test: /\.vue$/,
- loader: 'vue-loader'
- }
为了在 vue 中引入对. vue 的使用,我们需进行如下修改
index.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue demo</title>
- </head>
- <body>
- <div id="app">
- </div>
- </body>
- </html>
main.js
- import Vue from 'vue'import './styles/main.css'import App from './app.vue'
- new Vue({
- el: '#app',
- template: '<App/>',
- components: {
- App
- }
- })
app.vue
- <template>
- <div id="app">
- <img src="./images/logo.png" alt="logo" >
- {{msg}}
- </div>
- </template>
- <script>
- export default {
- name:'app',
- data(){
- return {
- msg: 'hello vue !!'
- }
- }
- }
- </script>
修改完成后 运行 npm run dev 命令 ,获得如下效果的页面
在上一步中,如果我们修改 app.vue 文件中的 msg 的参数,可以看到页面会自动刷新。但是此时是页面全局刷新的,如果我们只想局部刷新即只刷新修改的部分,需要使用 webpack 的 HotModuleReplacementPlugin 插件,在 webpack.config.js 的 plugins 中添加下面的信息:
- new webpack.HotModuleReplacementPlugin()
然后去 package.json 中,script 里面 dev 的值中加上 --hot -only
- "dev": "webpack-dev-server --hot-only --open",
然后重启服务,再修改 msg 的值,会发现此时值的改变是局部刷新的。
如果我们在浏览器的控制台中发现有如下提示
意思时说项目现在运行在开发环境中,在部署到正式环境下时,要确保它是处于 production 的模式。需要将代码打包部署到生产环境时需要进行如下配置:
- var webpack = require('webpack')
- module.exports = {
- // ...
- plugins: [
- // ...
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"'
- }
- }),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- }
- })
- ]}
来源: https://juejin.im/post/5a425cb4f265da43294e4f2e