webpak打包css之最全的簡單入門

上篇文章瞭解了怎麼去配置以及運行webpack，可是因爲簡單的打包js，有時候咱們有不少css文件須要去打包，這個怎麼辦呢？不用着急，這邊文章就是來一塊兒學習怎麼去簡單的打包css文件。

配置webpack環境

首先建立空文件夾經過命令全局安裝webpack（若是你已經全局安裝過webpack，能夠直接進行下一步初始化根目錄）

//全局安裝
npm install -g webpack
//或者--淘寶鏡像，速度比較快
cnpm install -g webpack

其次初始化你的文件根目錄而且安裝依賴

npm init  //根目錄初始化
npm install --save-dev webpack // 安裝Webpack

而後建立你的項目

eg：在根文件夾下建立一個src文件夾，src文件夾裏面能夠放入你的源代碼js，css等
    一樣根目錄下建立一個public文件夾，裏面放入你的html文件它在這裏目的在於引入打包後的js文件，這裏咱們先把       以後打包後的js文件命名爲bundle.js

根目錄下建立並配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript執行入口文件,
  entry:'./src/js/main.js',
  //須要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    filename:'bundle.js',   //自定義輸出文件名
    path:path.resolve(__dirname,'./public/js')  //自定義輸出文件所在目錄
  },
  //設置mode
   mode: 'development' // 設置mode
}

Loader

基本環境配置好後，因爲webpack自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。不能夠直接打包css，因此咱們須要使用到 css-loader 和 style-loader。，他們作兩件不一樣的事情，css-loader 會遍歷 CSS 文件，而後找到 url() 表達式而後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中。

安裝 css-loader 和 style-loader(全局安裝須要參數 -g)。

cnpm install  css-loader  style-loader

執行以上命令後，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。

接下來在src文件夾下的css文件夾裏建立一個index.css文件

body{
  background: red;
}

同時配置入口文件main.js

require("!style-loader!css-loader!../css/index.css");//這個就是配置的css文件
document.write("Hello World!");

而後在根目錄下運行webpack

webpack

輸出成功後，打開你的html文件，便可看到帶有css的打包過的項目！

配置文件

require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，這樣有些麻煩，咱們能夠經過配置文件來方便操做。

首先更改require CSS方式：

require("../css/index.css");

而後配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript執行入口文件,
  entry:'./src/js/main.js',
  //須要指定一下輸出的路徑path和輸出的文件名filename
  output:{
    filename:'bundle.js',   //自定義輸出文件名
    path:path.resolve(__dirname,'./public/js')  //自定義輸出文件所在目錄
  },
  //設置style-loader css-loader
   module:{
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

再次運行webpack，你會發現有神奇的效果。

開發環境

項目逐漸變大，webpack 的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色。

webpack --progress --colors

若是不想每次修改模塊後都從新編譯，那麼能夠啓動監聽模式。開啓監聽模式後，沒有變化的模塊會在編譯後緩存到內存中，而不會每次都被從新編譯，因此監聽模式的總體速度是很快的。

webpack --progress --colors --watch

固然，咱們可使用 webpack-dev-server 開發服務，這樣咱們就能經過 localhost:8080 啓動一個 express 靜態資源 web 服務器，而且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 能夠瀏覽項目中的頁面和編譯後的資源輸出，而且經過一個 socket.io 服務實時監聽它們的變化並自動刷新頁面。

//安裝
cnpm install webpack-dev-server -g
//運行
webpack-dev-server --progress --colors

在瀏覽器打開 http://localhost:8080/ 輸出結果以下：

進入到相對應的文件打開你的項目