webpack -> vue Component 從入門到放棄（二）

時間 2019-11-21

標籤 webpack vue component 入門放棄简体版

原文原文鏈接

Forewordcss

上一篇簡單介紹了webpack的打包功能，應該說是比較無心義的打包，對於開發人員來講，這種效率是很是低的。因此咱們來點昇華。html

First Stepvue

咱們給第一篇例子中加個樣式文件咱們 style.cssnode

body { background: yellow; }

而後修改 entry.jswebpack

require("!style-loader!css-loader!./style.css") // 載入 style.css
document.getElementById('app').innerHTML="it works";
require("./content.js");

ps: 這裏就體現loader的用處了，咱們先回顧一下index.html的代碼git

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app"></div>
         <script src="bundle.js"></script>
    </body>
</html>

在這裏咱們只引入webpack打包生成後的bundle.js，全部的js css 等都是經過這個文件被引入頁面的，而不像日常咱們引入 js 用 <script>標籤引入 css 用 link/<style>便籤引入.github

原理就是首頁將 style.css 也當作是一個模塊，而後用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。web

因此咱們還要再package.json安裝 css-loader style-loader 依賴npm

$ cnpm install css-loader --save-dev
$ cnpm install style-loader --save-dev

安裝成功後成功自動加入依賴信息
json

讓咱們跑一下

$ webpack entry.js bundle.js

刷新index.html後就能看到body被改成 yellow 了

若是每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。

將 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改成 require("./style.css") ,(ps:我用的是webpack 2.2.1版本的，在這裏它已經不容許在使用loaders 時去省略 -loader 這個後綴了，因此打包時報錯，請檢查你是否寫成了require("!style!css!./style.css") ) 而後執行：

//爲了看效果，咱們能夠在style.css裏面把yellow換成其餘顏色
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

# 有些環境下可能須要使用雙引號 並且須要在感嘆好前加上斜槓進行轉譯
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

顯然，這兩種使用 loader 的方式，效果是同樣的。

Second Step

要是每次都須要打一堆字符串去打包，簡直沒法忍受，因此咱們須要簡化，簡化。。。。

webpack.config

Webpack 在執行的時候，除了在命令行傳入參數，還能夠經過指定的配置文件來執行。默認狀況下，會搜索當前目錄的 webpack.config.js 文件，這個文件是一個 node.js 模塊，返回一個 json 格式的配置信息對象，或者經過 --config 選項來指定配置文件。

首先咱們仍是要先安裝webpack依賴，以前的demo都是在全局的webpack下操做的，如今咱們要在項目目錄下安裝webpack

$ cnpm install webpack --save-dev

成功在package.json加入依賴

而後建立一個配置文件 webpack.config.js：

#此文件不能寫註釋，我這裏圖方便，就以註釋的方式進行註解了
var webpack = require('webpack'); // 引入webpack 模塊
module.exports = { //commonJs模塊規則寫法
  entry: './entry.js', //入口文件，這裏指的是根目錄下的entry.js做爲入口文件
  output: {//輸出接口
    path: __dirname,//項目輸出的路徑（__dirname爲絕對路徑）
    filename: 'bundle.js'//文件以bundle.js輸出
  },

//定義了對模塊的處理邏輯，這裏能夠用 loaders 定義了一系列的加載器，
以及一些正則。當須要加載的文件匹配test的正則時，
就會調用後面的 loader 對文件進行處理，這正是 webpack 強大的緣由。
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'}
    ]
  }
}

詳細的其餘配置信息能夠去官網進行查看

同時簡化 entry.js 中的 style.css 加載方式：