3 webpack 4 加vue 2.0生產環境搭建
阿新 • • 發佈:2018-12-01
環境 配置文件 搭建 all pack cif vue pac title
1 在前兩篇筆記中已經能把開發環境弄好了,接來下構建他的生產環境
2 使用npm 安裝url-loader和file-loader來支持圖片和字體
npm install --save-dev url-loader
npm install --save-dev file-loader
3 配置webpack.config.js
{ test:/\.(gif|jpg|png|woff|svg|eot|ttf|)\??.*$/, loader:‘url-loader?limit=1024‘ }
然後再項目目錄下放入圖片,在.vue文件中引用圖片,就會在瀏覽器中看到
<template> <div> <v-title title="vue組件化"></v-title> <v-button v-on:click="handleClick">點擊按鈕</v-button> <p> <img src="./images/test.jpg" style="width:200px;"> </p> </div> </template>
4打包
先安裝下面兩個依賴項
npm install --save-dev webpack-merge
npm install --save-dev html-webpack-plugin
5 在demo目錄下新
在package.json中添加build選項配置
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open --config webpack.config.js", "build":"webpack --progress --hide-modules --config webpack.prod.config.js" },
webpack.prod.config.js生產環境配置文件
6 webpack.prod.config.js內容如下
3 webpack 4 加vue 2.0生產環境搭建