我的webpack学习笔记（二）
生活随笔
收集整理的這篇文章主要介紹了
我的webpack学习笔记（二）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
前言
上一篇文章我們講了多頁面js的打包，本篇文章我們繼續(xù)scss的打包。
多頁面css單獨打包
首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴
$ npm install sass-loader node-sass css-loader style-loader --save-dev
安裝完loaders，下面在webpack.config.js中加入如下代碼
rules: [{test: /\.scss$/,use: extractPlugin.extract({fallback: 'style-loader',use: [{loader: "css-loader"}, {loader: "sass-loader",options: {includePaths:[__dirname+"/src/css/app",__dirname+"/src/css/base"]}}]})} ]然后我們需要通過extract-text-webpack-plugin插件來提取并輸出成單獨的css
$ npm install --save-dev extract-text-webpack-plugin
在webpack.config.js中引用
const path = require('path') const webpack = require('webpack') //to access built-in plugins const fs = require('fs') const extractPlugin = require('extract-text-webpack-plugin') function getEntry() {let jsPath = path.resolve(__dirname, 'src/js/app')let dirs = fs.readdirSync(jsPath)let matchs = [], files = {}dirs.forEach(function (item) {matchs = item.match(/(.+)\.js$/);if (matchs) {files[matchs[1]] = path.resolve(__dirname, 'src/js/app', item)}})return files } const extractSass = new extractPlugin({filename: "[name]/[name].css" }) module.exports = {entry: getEntry(),output: {path: path.join(__dirname, "src/dist/"), //文件輸出目錄publicPath: "http://www.workspace.com/webpack-demo/src/dist/", //此處要特別注意，比較明顯的是css中的圖片路徑，跟這個設置有關，編譯完后可以看下編譯后的css中圖片路徑你就明白了。filename: "[name]/[name].js", //根據(jù)入口文件輸出的對應多個文件名},module: {loaders: [{test: /\.js/,loader: 'babel-loader',include: __dirname + '/src/js'}],rules: [{test: /\.scss$/,use: extractPlugin.extract({fallback: 'style-loader',//resolve-url-loader may be chained before sass-loader if necessaryuse: [{loader: "css-loader"}, {loader: "sass-loader",options: {includePaths: [__dirname+"/src/css/app",__dirname+"/src/css/base"]}}]})},{test: /.(png|gif|jpe?g|svg)$/,loader: 'url-loader',query: {limit: 10000}}]},plugins: [//js文件的壓縮new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),extractSass] }你會發(fā)現(xiàn)loader中多了一個loader
這個url-loader是處理圖片文件的，在應用之前我們要安裝相關依賴
$ npm install --save-dev url-loader file-loader
你會發(fā)現(xiàn)limit，這里的規(guī)則是：如果圖片size小于10k時把圖片準換成base64嵌入到url中
index.scss內(nèi)容如下
@import "../base/base.scss"; $base-font-size: 72; $base-color:#F5A623; body{color:$base-color; } .logo{background-image: url('../../asset/logo.jpeg'); } .error{background-image: url('../../asset/404.png'); }index.js內(nèi)容
import Header from '../module/header' import '../../css/app/index.scss' window.onload = function(){document.querySelector('.main').innerHTML += Header.html }index.html內(nèi)容如下
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><meta content="telephone=no" name="format-detection"/><meta name="apple-touch-fullscreen" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><title>webpack-demo</title><link rel="stylesheet" type="text/css" href="./src/dist/index/index.css"/> </head> <body><header class="logo"></header><div class="main">welcome webpack demo</div><div class="error"></div> </body> <script src="./src/js/base/require-zepto.js"></script> <script src="./src/dist/index/index.js"></script> </html>執(zhí)行結果
準備完畢，下面我們開始打包
首先看一下打包前的目錄
$ npm run dev
下面看一下打包后文件夾變化
總結
以上是生活随笔為你收集整理的我的webpack学习笔记（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OOP基础知识
- 下一篇： 专访 | 德国大神Hans Uszkor