3 webpack 4 加vue 2.0生產環境搭建

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內容以下