webpack4.0从零开始单页（多页）应用配置(二)
webpack4.0从零开始单页（多页）应用配置 (一)
加载图片
通过webpack运行起的项目如果不对图片资源做处理是不会加载到文件的。
例：我们在src目录下添加一个image目录并且放入一张图片在里面：
且在style.css文件加入如下代码：
html, body{
height: 100%;
background-color: red;
background-image: url('./image/yangmi.jpg')
}执行npm run dev发现并不会如期那样，界面上呈现图片。且报如下错误
提示已经很智能了，需要安装loader解析此类文件。
安装：npm install --save-dev file-loader url-loader
- 之前讲过处理资源一般是在
moude配置，所以在moude下的规则配置如果就能加上图片了
{
test: /\.jpg|\.png|\.gif|\.jpeg|\.svg/,
use: {
loader: 'url-loader',
options: {
limit: 8192 //将小于8kb的图片 转为base64， 这样就会减少发送http的请求提高性能
}
}
}再次执行，npm run dev;
加载字体
项目中可能会加入各种字体库，现在除了svg，我们用得比较多的就是iconfont了所以这里我们拿iconfont举例：我们在iconfont图标库里导出图标，并将放在src目录下命名为font:
webpack.config.js添加配置如下：
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader:'url-loader'
}
}并在main.js文件引入iconfont.css并添加一个名为iconauth的名字并执行npm run dev 如下： 
引用vue
安装： npm install vue --save npm install --save-dev vue-loader
webpack.config.js
{
test: /\.vue$/,
use: {
loader: 'vue-loader'
}
}main.js
import Vue from 'vue';
import App from './app.vue'
new Vue({
el: '#app',
render: h => h(App)
});执行npm run dev编译报错：
<font color="#b20000">vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.</font>
所以需要再安装：npm install --save-dev vue-template-compiler
关于vue-template-compiler 的定义 ，其github描述如下 ：
This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. In most cases you should be using it with vue-loader, you will only need it separately if you are writing build tools with very specific needs.
翻译如下 ：
此包可用于将Vue 2.0模板预编译为呈现函数，以避免运行时编译开销和CSP限制。 在大多数情况下，您应该将它与vue-loader一起使用，如果您正在编写具有特定需求的构建工具，则只需要单独使用它;
所以不知道的人很容易将vue-template-compiler遗忘，不过跟着处理一个一个报错就行了，，，哈哈~
再次执行npm run dev:
what?
日常每天问自己，我哪儿做错了，我知道了我一定改 ╥﹏╥！
在github上看到了别人的回答：
，可能是因为v15还不太稳定的原因，所以将其回到vue-loader@^14.2.2版本就行了，npm install --save-dev vue-loader@^14.2.2
编译ES6代码兼容浏览器
都知道解决ES6都是通过babel进行编译的，所以安装babel相关插件:
`npm install babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3
--save-dev`
在项目根目录下创建.babelrc
{
"presets": [
"env",
"stage-0",
"stage-1",
"stage-2",
"stage-3"
],
"plugins": [
"transform-runtime"
]
}新增webpack.config.js配置
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}安装：我们在项目开发中并不是所有的语法都会用到，所以添加babel-plugin-transform-runtime将用到的会自动打包到项目中npm i babel-plugin-transform-runtime --save-dev
.babelrc配置
{
"presets": [
"env",
"stage-0",
"stage-1",
"stage-2",
"stage-3"
],
"plugins": [
[
"transform-runtime",
{
"polyfill": false
}
]
]
}区分开发环境和生产环境
将开发环境的配置和生产环境的配置放在不同目录更加有利于阅读，且不用在同一目录 下写很多判断去区分，所以在根目录下新建webpack.dev.config.js 和 webpack.prod.js;
修改package.json
{
script: {
"dev": "webpack-dev-server --development --config webpack.dev.js",
"build": "webpack --config webpack.prod.js --production"
}
}引入webpack-merge
npm install --save-dev webpack-merge
webpack.dev.js添加入代码
const Merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');
const path = require('path');
console.log(process.env.NODE_ENV);
module.exports = Merge(baseWebpackConfig, {
devServer: {
contentBase: path.join(__dirname, 'dist'),// 服务器资源的根目录，不写的话，默认为bundle.js
hot: true, //启用热加载
host: 'localhost',
port: 8800,//端口号
compress: true, // 服务器资源采用gzip压缩
},//通过node起一个本地服务器，webpack-dev-server完成一些代理，mock数据热加载等功能
mode: 'development'
});webpack.prod.js 添加如下代码
const Merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.config');
module.exports = Merge(baseWebpackConfig, {
mode: 'production'
});到这里基本上可以运行于项目了，后期会讲到如果优化一些项，比如提取多次引用问题，自动添加css前缀等！