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内容如下