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前綴等！