webpack入門

時間 2019-11-18

標籤 webpack 入門简体版

原文原文鏈接

參考：http://www.jianshu.com/p/42e11515c10fcss

安裝webpack：npm install webpack -g

一切皆模塊

Webpack有一個不可不說的優勢，它把全部的文件均可以當作模塊處理，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等，只有經過合適的loaders，它們均可以被當作模塊被處理。html

CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你能夠把樣式表嵌入webpack打包後的JS文件中。前端

......node

你還記得嗎？webpack只有單一的入口，其它的模塊須要經過 import, require, url等導入相關位置，爲了讓webpack能找到」main.css「文件，咱們把它導入」main.js 「中，以下react




一般狀況下，css會和js打包到同一個文件中，並不會打包爲一個單獨的css文件，不過經過合適的配置webpack也能夠把css打包爲單獨的文件的。
不過這也只是webpack把css當作模塊而已，我們繼續看看一個真的CSS模塊的實踐。

//main.js import React from 'react'; import {render} from 'react-dom'; import Greeter from './Greeter'; import './main.css';//使用require導入css文件 render(<Greeter />, document.getElementById('root'));

CSS module

在過去的一些年裏，JavaScript經過一些新的語言特性，更好的工具以及更好的實踐方法（好比說模塊化）發展得很是迅速。模塊使得開發者把複雜的代碼轉化爲小的，乾淨的，依賴聲明明確的單元，且基於優化工具，依賴管理和加載管理能夠自動完成。
不過前端的另一部分，CSS發展就相對慢一些，大多的樣式表卻依舊是巨大且充滿了全局類名，這使得維護和修改都很是困難和複雜。webpack

最近有一個叫作 CSS modules 的技術就意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，動畫名默認都只做用於當前模塊。Webpack從一開始就對CSS模塊化提供了支持，在CSS loader中進行配置後，你所須要作的一切就是把」modules「傳遞都所須要的地方，而後就能夠直接把CSS的類名傳遞到組件的代碼中，且這樣作只對當前組件有效，沒必要擔憂在不一樣的模塊中具備相同的類名可能會形成的問題。具體的代碼以下web

插件（Plugins）

插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，插件並不直接操做單個文件，它直接對整個構建過程其做用。npm

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能。json

使用插件的方法

//webpack.config.js
var webpack = require('webpack');

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {...},

  module: {
    loaders: [
      { test: /\.json$/, loader: "json" },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
      { test: /\.css$/, loader: 'style!css?modules!postcss' }//這裏添加PostCSS
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    new webpack.BannerPlugin("Copyright Flying Unicorns inc.")//在這個數組中new一個就能夠了
  ],

  devServer: {...}
}