找到 必須 載器 loader 文件的 安裝 webpack clas 正則

自動打包（開發時的打包） 我們在使用webpack打包的時候每寫一段代碼都得打包一次，並且刪除之前打包好的dist文件夾才能夠測試效果。非常不方便。所以我們需要一個能夠自動打包的工具 這個東西叫做webpack-dev-server。

1. npm install --save-dev webpack-dev-server--->安裝資源包
2. 配置
3. webpack 啟動 換成 webpack-dev-server 啟動
4. 啟動以後不能直接使用，他並不會幫我們把dist文件夾更新在硬盤，而是存放在內存中
- 1. 並且他啟動的web服務是以項目根目錄作為根目錄，並不是dist文件夾
 
- 2. 因此我們要在webpack.config.js文件中配置webpack-dev-server
- 3. 我們可以在webpack文檔中的開發中找到devServer.contentBase查閱並配置

//開發服務配置webpack-dev-server
    devServer:{
        //配置以這個文件路徑作為web服務的根路勁
        contentBase:path.resolve(__dirname,‘./dist‘)
    }
- 4. 配置npm的腳本，找到package.json文件在scripts對象中填寫
- "dev":‘webpack-dev-server‘---開發時啟動服務使用：npm run dev
 
- "build":‘webpack‘----打包時使用命令：npm run webpack
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "build": "webpack"
  },

###. 引入模塊的方式去引入css(樣式)文件時報錯

- 在index.js文件中引入css文件的時候，因為webpack打包只認識js文件，圖片，css，字體這些都不認識，所有先把css轉換成webpack認識的東西 - 可以在官方文檔的 指南 管理資源 加載css裏面查閱文檔 - css-loader 對css文件做轉換 轉換成 webpack所能識別的模塊css文件（會轉化成js文件） - style-loader 對上一步轉換之後的 css模塊文件再做解析，解析到頁面的 style 標簽中去。

1. npm install --save-dev css-loader style-loader
 
2. 配置
3. //加載器
module:{
//定義加載器的規則
rules:[
{
test:/\.css$/,//用正則的方式找到匹配的模塊
//註意這個加載器書寫時有順序，必須倒敘寫，第一步驟寫在最底下
use:[
‘style-loader‘,
‘css-loader‘
]//使用什麽加載器去處理這個模塊
}
]

webpack加載器和自動打包工具