webpack加載器和自動打包工具

自動打包（開發時的打包）

咱們在使用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(樣式)文件時報錯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' ]//使用什麼加載器去處理這個模塊
} ]

sass加載器須要安裝sass-loader和node-sass，同時要配置webpack.config.js文件node

1.npm install --save-dev sass-loader node-sass 2.配置 //加載器
 module:{ //定義加載器的規則
 rules:[ { test:/\.css$/,//用正則的方式找到匹配的模塊
                //注意這個加載器書寫時有順序，必須倒敘寫，第一步驟寫在最底下
 use:[ 'style-loader', 'css-loader' ]//使用什麼加載器去處理這個模塊
 }, { test:/\.scss$/, use:[ 'style-loader',//最後經過style-loader寫到 網頁上去
                    'css-loader',//將css文件轉換成webpack認識的模塊文件
                    'sass-loader'//將sass文件轉換成css文件
 ] } ] }, 3.在入口js文件中引入sass文件 import "./style/sassDome.scss";