Vue系列之 => webpack處理樣式檔案
阿新 • • 發佈:2019-01-08
處理css檔案
安裝
npm i style-loader css-loader -D
main.js
import $ from 'jquery' //Es6中匯入模組的方式 import './css/index.css' // import './css/index.css' webpack預設只能打包處理js型別檔案 //如果需要處理非js型別的檔案,我們需要手動安裝一些合適的第三方loader載入器 // 1、打包處理css檔案,需要安裝 npm i style-loade css-loader -D // 2、開啟webpack.config.js這個配置檔案,在裡面新增一個配置節點,叫做module它是一個物件//然後在module這個物件上有個rules屬性,這個rules屬性是個陣列;這個陣列中存放了所有第三方 //檔案的匹配和處理規則 $(function(){ $('li:odd').css('backgroundColor','red'); $('li:even').css('backgroundColor',function(){ return 'skyblue'; }); })
webpack.config.js
const path = require('path'); //啟用熱更新的第二步,匯入webpack const webpack = require('webpack');//匯入在記憶體中生成html頁面的外掛,只要是外掛,都要放到plugins節點中去 const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }, devServer: { //這是配置webpack-dev-server命令引數的第二種形式open: true, //自動開啟瀏覽器 port: 3100, //設定埠 contentBase: 'src', //指定託管的根目錄 hot: true //啟用熱更新的第一步 }, plugins: [ //配置外掛的節點 //啟用熱更新第三步 new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模組物件 new htmlWebpackPlugin({ //建立一個在記憶體中生成html頁面的外掛 template : path.join(__dirname,'./src/index.html'), //指定模板頁面,根據指定的路徑生成記憶體中的頁面 filename : 'index.html' //指定記憶體中生成的頁面的名稱 }) ], module : { //這個節點,用於配置所有第三方模組載入器 rules : [ //所有第三方模組的匹配規則 { test:/\.css$/,use:['style-loader','css-loader'] } //配置處理.css檔案的第三方loader規則
//注意:webpack處理第三方檔案型別的過程:
//1,發現這個要處理的檔案不是js檔案,就去配置檔案中查詢有沒有對應的第三方Loader規則
//2,如果能找到對應的規則,就會呼叫對應的Loader處理這種檔案型別
//3, 在呼叫loader的時候,是從後往前呼叫的
//4,當最後的一個Loader呼叫完畢,會把處理的結果直接交給webpack進行打包合併,最終輸出到bundle.js中去。
] } }
處理less檔案
npm i less -D
npm i less-loader -D
main.js檔案
import $ from 'jquery' //Es6中匯入模組的方式 import './css/index.css' import './css/index.less' // import './css/index.css' webpack預設只能打包處理js型別檔案 //如果需要處理非js型別的檔案,我們需要手動安裝一些合適的第三方loader載入器 // 1、打包處理css檔案,需要安裝 npm i style-loade css-loader -D // 2、開啟webpack.config.js這個配置檔案,在裡面新增一個配置節點,叫做module它是一個物件 //然後在module這個物件上有個rules屬性,這個rules屬性是個陣列;這個陣列中存放了所有第三方 //檔案的匹配和處理規則 $(function(){ $('li:odd').css('backgroundColor','red'); $('li:even').css('backgroundColor',function(){ return 'skyblue'; }); })
webpack.config.js檔案
const path = require('path'); //啟用熱更新的第二步,匯入webpack const webpack = require('webpack'); //匯入在記憶體中生成html頁面的外掛,只要是外掛,都要放到plugins節點中去 const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' }, devServer: { //這是配置webpack-dev-server命令引數的第二種形式 open: true, //自動開啟瀏覽器 port: 3100, //設定埠 contentBase: 'src', //指定託管的根目錄 hot: true //啟用熱更新的第一步 }, plugins: [ //配置外掛的節點 //啟用熱更新第三步 new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模組物件 new htmlWebpackPlugin({ //建立一個在記憶體中生成html頁面的外掛 template: path.join(__dirname, './src/index.html'), //指定模板頁面,根據指定的路徑生成記憶體中的頁面 filename: 'index.html' //指定記憶體中生成的頁面的名稱 }) ], module: { //這個節點,用於配置所有第三方模組載入器 rules: [ //所有第三方模組的匹配規則 { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //配置處理.css檔案的第三方loader規則 { test: /\.less$/, //配置處理.less檔案的第三方檔案規則 use: ['style-loader','css-loader','less-loader'] } ] } }
處理scss檔案
安裝 npm i sass-loader -D && npm i node-sass -D (在安node-sass要使用cnpm,npm安裝極容易失敗)
其他配置按照css和less操作即可。