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 内容如下
来源: http://www.bubuko.com/infodetail-2868696.html