主題 - css加載器 & 自動(dòng)打包+瀏覽器自動(dòng)刷新 & 優(yōu)雅降級(jí)
css加載器
在webpack模塊化開發(fā)中默認(rèn)只支持js文件靶溜，其它的文件岸霹，比如css,leass,sass.....都需要用到加載器(loader)
配置loader：
對css進(jìn)行轉(zhuǎn)換
npm install style-loader? css-loader -D
在package.json查看是否已經(jīng)安裝成功，成功安裝如下：
?在index.js文件下用以下語句引入：（從右到左讀秒拔，但是要從左到右寫）
require('style-loader!css-loader!./assets/css/a.css');
執(zhí)行 webpack -p 打包后會(huì)將css樣式渲染
拓展：初級(jí)手動(dòng)配置webpack
1.新建webpack.config.js文件并加入以下配置:
let path = require('path');
module.exports = {
? ? entry: './src/index.js', //入口文件
? ? output: { //默認(rèn)輸出到dist
? ? ? ? path: path.resolve(__dirname, 'dist'), //指定編譯目錄 不寫默認(rèn)指定到dist
? ? ? ? filename: 'js/main.js', //出口文件路徑
? ? },
? ? module: {
? ? ? ? rules: [
? ? ? ? ? ? //以.css結(jié)尾的文件 css加載器 - use內(nèi)排名分先后
? ? ? ? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] },
? ? ? ? ],
? ? },
? ? //配置環(huán)境
? ? mode: 'development' // | production
}
在module的rules中已經(jīng)添加了css加載器获列，所以index.js中的代碼可以轉(zhuǎn)變?nèi)缦掳竽瑁苯右镁涂梢粤恕?/p>
由于webpack.config.js中設(shè)置了mode冕碟，所以只需要webpack就可以打包了焙压。
注意事項(xiàng): webpack.config.js配置的時(shí)候鹏漆，正則不需要加引號(hào)。
如果多個(gè)出入口配置如下：
webpack -w 自動(dòng)監(jiān)聽開發(fā)環(huán)境下的文件的更改并打包到dist目錄文件下去 --- 自動(dòng)打包
瀏覽器自動(dòng)刷新 -? webServer 搭建前端開發(fā)服務(wù)器
安裝:cnpm install webpack-dev-server -g(全局安裝)
（將開發(fā)的項(xiàng)目全部打包到計(jì)算機(jī)內(nèi)存中叛本，內(nèi)存中會(huì)生成一個(gè)類似于dist目錄的結(jié)構(gòu)，然后瀏覽器檢測到變化后會(huì)自動(dòng)刷新）：出現(xiàn)以下就安裝成功啦彤钟！
在webpack.config.js中配置一下虛擬目錄如下：
在終端輸入:webpack-dev-server后會(huì)出現(xiàn)以下：
在瀏覽器中輸入http://localhost:8081就可以了来候，更改css文件中的樣式可以最直觀的看到效果,同時(shí)終端中會(huì)出現(xiàn)以下信息顯示成功
自動(dòng)打開瀏覽器并更新：
1-1
webpack-dev-server --port 8001 --open
如果不想手動(dòng)寫這么長的命令，那么在package.json文件中配置一下就可以使用npm start來替代以上的命令啦逸雹！
1-2:
輸入命令：webpack-dev-server
優(yōu)雅降級(jí)(es6->es5):babel
安裝babel的核心：
npm install babel-loader babel-core babel-preset-env -D
package.json文件中會(huì)自動(dòng)生成以下:
由于babel目前8.0.2版本不穩(wěn)定营搅，安裝的時(shí)候出現(xiàn)警告沒有安裝依賴，需要倒退去安裝穩(wěn)定版本來解決這個(gè)問題:
npm install babel-loader@7.1.5 babel-core babel-preset-env -D
在webpack.config.js文件中添加以下配置：
let 打包后變成了var ：）０鹪摇Ｗ省！可以放心大膽的寫激進(jìn)語法啦辫樱！
